1. Introduction to html2canvas

The html2canvas library allows us to take a "screenshot" of a webpage or part of a webpage directly on the browser, that is, the browser implements the screenshot function.

principle

Screenshots are DOM based. The basic principle is to read the structure and style information of the rendered DOM elements, and then build screenshots based on these information and present them on the canvas.

2. How to use

1. Install

npm install html2canvas

2. Introduce

import html2canvas from 'html2canvas';

3. Usage

You can only pass one parameter, which is the DOM element you want to screenshot. This function returns a Promise object. In its then method, you can get the drawn canvas object, and you can convert it into a picture by calling the toDataURL method of the canvas object. .

html2canvas(document.body).then(function(canvas) {
    
    
    document.body.appendChild(canvas);
});

You can also set the configuration item html2canvas(element, options) as needed. For details, please refer to the official website: https://html2canvas.hertzen.com/configuration

4. Realize saving pictures

Need screenshot area

 <div class="box" ref="imgBox">
 这里就是截图的区域
 </div>
 <el-button @click="saveImg" type="primary">点击保存图片</el-button>

How to save pictures

Even if the page has a scroll bar, it can be configured accordingly to achieve a complete screenshot.
There are two ways to save the picture:
1. Put the URL in the href attribute of the a tag, and click the hyperlink to download the picture.

saveImage() {
    
    
   html2canvas(this.$refs.imgBox, {
    
    
     height: this.$refs.imgBox.scrollHeight,	
     width: this.$refs.imgBox.scrollWidth,
   }).then((canvas) => {
    
    
     const link = document.createElement("a"); // 创建一个超链接对象实例
     link.download = "Button.png"; // 设置要下载的图片的名称
     link.href = canvas.toDataURL(); // 将图片的URL设置到超链接的href中
     link.click(); // 触发超链接的点击事件
   });
 },

2. Open a new window to save pictures.

saveImage() {
    
    
   html2canvas(this.$refs.imgBox, {
    
    
     height: this.$refs.imgBox.scrollHeight,	
     width: this.$refs.imgBox.scrollWidth,
   }).then((canvas) => {
    
    
     let dataURL = canvas.toDataURL("image/png");
     var blob = this.changeToBlob(dataURL);//获取blob对象
     var url = URL.createObjectURL(blob);
     window.open(url);//创建一个新的浏览器窗口对象, 参数指定了该窗口将会打开的地址
   });
 },
 //Base64 to Blob
 changeToBlob(dataURL) {
    
    
    var arr = dataURL.split(","),
      type = arr[0].match(/:(.*?);/)[1],//获取MIME 类型，即image/png
      bstr = atob(arr[1]),
      count = bstr.length,
      u8arr = new Uint8Array(count);
    while (count--) {
    
    
      u8arr[count] = bstr.charCodeAt(count);
    }
    return new Blob([u8arr], {
    
    
      type: type,
    });
  },

3. Summary

The main steps to save pictures through html2canvas:

1. HTML converted to canvas

Based on html2canvas.js, an element can be rendered as a canvas, and then the Promise object will pass the captured image to the parameter canvas.

2. Canvas to image

The canvas generated in the previous step is the canvas element object containing the target element. To achieve the goal of saving pictures, you only need to convert canvas to image.
The toDataURL method based on the native canvas outputs the canvas as an image address of the data: URI type.

3. Image download

Put it in the href attribute of the a tag or open a new window to save and download the picture.

Vue realizes page screenshot and save picture function