vue实现页面截图、保存图片功能

淩亂°似流年 2023-10-11 16:35 65阅读 0赞

#### vue实现页面截图、保存图片功能 ####

*  一. html2canvas简介
 *  二. 如何使用
 *   *  1.安装
     *  2.引入
     *  3.用法
     *  4.实现保存图片
 *  三. 总结

## 一. html2canvas简介 ##

html2canvas库允许我们直接在浏览器上拍摄网页或部分网页的“屏幕截图”，即浏览器实现截图的功能。

*  原理

屏幕截图是基于DOM的。其基本原理就是读取已经渲染好的DOM元素的结构和样式信息，然后基于这些信息去构建截图，呈现在canvas画布中。

## 二. 如何使用 ##

### 1.安装 ###

npm install html2canvas

### 2.引入 ###

import html2canvas from 'html2canvas';

### 3.用法 ###

可以只传一个参数，就是你要截图的DOM元素，该函数返回一个Promise对象，在它的then方法中可以获取到绘制好的canvas对象，通过调用canvas对象的toDataURL方法就可以将其转换成图片。

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

也可以根据需要设定配置项html2canvas(element, options)。具体可以参考官网：https://html2canvas.hertzen.com/configuration

### 4.实现保存图片 ###

*  需要截图区域

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

*  保存图片的方法

即使页面有滚动条也可进行相应配置，实现完整截图。  
有两种方式来实现保存图片：  
1.将URL放到a标签的href属性中，点击超链接来实现图片下载。

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.打开一个新的窗口，实现图片保存。

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,
        });
      },

## 三. 总结 ##

通过html2canvas保存图片的主要步骤：

*  1.html转为canvas

基于html2canvas.js可将一个元素渲染为canvas，然后Promise对象会将截取的图片传递给参数canvas。

*  2.canvas转image

上一步生成的canvas即为包含目标元素的canvas元素对象。实现保存图片的目标只需要将canvas转image即可。  
基于原生canvas的toDataURL方法将canvas输出为data: URI类型的图片地址。

*  3.图片下载

将其放到a标签的href属性中或者打开一个新的窗口，实现图片的保存下载。