沫言|超不错 Vue.js 实现H5页面截图

2026-07-27

在开发vue项目，有时会遇到需要页面截图或指定区域截图需求。今天给大家推荐2个超赞的截图插件。

文章图片
开始截图

文章图片
开始截图
domtoimage主要的属性

filter：过滤器节点中默写不需要的节点；
bgcolor：图片背景颜色；
height ， width：图片宽高；
style：传入节点的样式，可以是任何有效的样式；
quality：图片的质量，也就是清晰度；
cacheBust：将时间戳加入到图片的url中，相当于添加新的图片；
imagePlaceholder：图片生成失败时，在图片上面的提示，相当于img标签的alt；

【沫言|超不错 Vue.js 实现H5页面截图】domtoimage主要的方法

domtoimage.toPng(...); 将节点转化为png格式的图片；
domtoimage.toJpeg(...); 将节点转化为jpg格式的图片；
domtoimage.toSvg(...); 将节点转化为svg格式的图片，生成的图片的格式都是base64格式；
domtoimage.toBlob(...); 将节点转化为二进制格式，这个可以直接将图片下载；
domtoimage.toPixelData(...); 获取原始像素值，以Uint8Array 数组的形式返回；

最后附上项目地址，可以去了解更多信息。
# 仓库地址ok ，就介绍到这里。如果大家有其它优秀的Vue截图组件，欢迎分享交流！

推荐阅读

上一篇：近期|4股获北向资金连续净买入隆基股份连续4天获净买入

下一篇：清澈如初|“小爱同学”被抢注？小米公司无能为力很无奈？上诉被驳回