随着前端的发展,用户在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);
});