前端截图功能实现

随着前端的发展，用户在web页面也能获得更好的体验，相对来说对页面及功能的要求也越来越高，前端能带给用户更多更好的体验，这次我们就来介绍两款前端网页截图工具库。

【01】dom-to-image

​ 1、dom-to-image：dom-to-image是一个JavaScript库，可以将DOM元素转换为可下载的图像，包括PNG和JPEG格式。它可以生成静态图像，也可以包含动态内容。这个库的优点是它可以直接处理DOM元素，而不需要使用canvas或其他复杂的API。它还提供了一些选项，例如可以指定要捕获的DOM元素，指定输出图像的大小，以及可以自定义样式等。

【02】html2canvas

2、html2canvas： html2canvas是一个开源的JavaScript库，可以将网页中的HTML元素转换为canvas图像。它可以将整个网页或指定的HTML元素转换为canvas图像，包括动态内容，并支持跨域使用。除了支持常见的图像格式，如PNG和JPEG，还支持将导出的图像附加到PDF中。这个库最常用于网页截图、生成报告和生成可打印的PDF文件等场景。该库也有一些选项可供配置，例如可以指定要捕获的HTML元素，指定输出图像的大小和质量，以及可以自定义样式等。

功能对比

以上两个开源库都能对网页进行截图（实际上是dom元素的渲染）

不同的是html2canvas顾名思义会转换成canvas绘制后再生成图片，而dom-to-image则是直接获取dom元素进行渲染生成图片。

性能

在分别的三次生成中，利用console.timeEnd() 对页面进行截图操作

dom-to-image所需时间大大低于html2canvas

分别为default: 3809.0439453125 ms，default: 3722.1869563250 ms，default: 3797.3568748504 ms

而html2canvas三次所需时间为default: 9278.0821561227 ms，default: 9509.1520286345 ms，fault: 9421.8765951254 ms。

附上代码：

import axios from 'axios';
import domtoimage from 'dom-to-image'  
base64ToFile(base64, fileName) {
    // 将base64按照 , 进行分割 将前缀  与后续内容分隔开
    let data = base64.split(',');
    // 利用正则表达式 从前缀中获取图片的类型信息（image/png、image/jpeg、image/webp等）
    let type = data[0].match(/:(.*?);/)[1];
    // 从图片的类型信息中 获取具体的文件格式后缀（png、jpeg、webp）
    let suffix = type.split('/')[1];
    // 使用atob()对base64数据进行解码  结果是一个文件数据流 以字符串的格式输出
    const bstr = window.atob(data[1]);
    // 获取解码结果字符串的长度
    let n = bstr.length
    // 根据解码结果字符串的长度创建一个等长的整形数字数组
    // 但在创建时 所有元素初始值都为 0
    const u8arr = new Uint8Array(n)
    // 将整形数组的每个元素填充为解码结果字符串对应位置字符的UTF-16 编码单元
    while (n--) {
        // charCodeAt()：获取给定索引处字符对应的 UTF-16 代码单元
        u8arr[n] = bstr.charCodeAt(n)
    }
    // 利用构造函数创建File文件对象
    // new File(bits, name, options)
    const file =  new File([u8arr], `${fileName}.${suffix}`, {
        type: type
    })
    // 将File文件对象返回给方法的调用者
    return file;
}
domtoimage.toPng('dom元素').then( imgPath => {
    //添加请求头
    var formData = new FormData();
    // form data 添加file 参数
    formData.append("file", this.base64ToFile(imgPath, '页面截图'));
    let config = {
        headers: { "Content-Type": "multipart/form-data" }
    };
    axios.post(`图片上传url`, formData, config).then((res) => {
        if(res.status === 200 && res?.data?.data) {
        } else {
            this.$message.error('保存封面图片错误！')
        }
    })
}).catch( (error)=> {
    console.error('截图出错了!', error);
});