文章目录
Vue整合Dom-To-Image,实现截图并下载文件
1.npm相关模块
npm install dom-to-image
2.在页面(.vue)直接引入
// dom-to-image 实现截图
import domToImage from 'dom-to-image';
3.相关实现代码
相关DOM元素:
<div style="width: 800px; height: 735px" id="auto_making"></div>
①截图并下载,生成.png格式
screenPNG() {
// 通过id获取dom
const node = document.getElementById('auto_making');
domToImage
.toPng(node)
.then((dataUrl) => {
// 输出图片的Base64,dataUrl,下载到本地
// 生成一个a元素
const a = document.createElement('a');
// 创建一个单击事件
const event = new MouseEvent('click');
// 设置图片名称没有设置则为默认
a.download = '小辰哥哥';
// 将生成的URL设置为a.href属性
a.href = dataUrl;
// 触发a的单击事件
a.dispatchEvent(event);
})
.catch(function (error) {
console.error(error);
})
}
②截图并下载,生成.svg格式
screenSVG() {
// 通过id获取dom
const node = document.getElementById('auto_making');
domToImage
.toSvg(node)
.then(function (dataUrl) {
// 输出图片的Base64,dataUrl,下载到本地
// 生成一个a元素
const a = document.createElement('a');
// 创建一个单击事件
const event = new MouseEvent('click');
// 设置图片名称没有设置则为默认
a.download = '小辰哥哥';
// 将生成的URL设置为a.href属性
a.href = dataUrl;
// 触发a的单击事件
a.dispatchEvent(event);
})
.catch(function (error) {
console.error(error);
})
}
③其它属性
domToImage主要的方法有:
domToImage.toPng():将节点转化为png格式的图片
domToImage.toJpeg():将节点转化为jpg格式的图片
domToImage.toSvg():将节点转化为svg格式的图片,生成的图片的格式都是base64格式
domToImage.toBlob():将节点转化为二进制格式,这个可以直接将图片下载
domToImage.toPixelData():获取原始像素值,以Uint8Array 数组的形式返回,每4个数组元素表示一个像素点,即rgba值。这个方法也是挺实用的,可以用于WebGL中编写着色器颜色。
domtoimage主要的属性有:
filter:过滤器节点中默写不需要的节点;
bgcolor:图片背景颜色;
height, width:图片宽高;
style:传入节点的样式,可以是任何有效的样式;
quality:图片的质量,也就是清晰度;
cacheBust:将时间戳加入到图片的url中,相当于添加新的图片;
imagePlaceholder:图片生成失败时,在图片上面的提示,相当于img标签的alt;
总结
每天一个提升小技巧!!!