在开发vue项目,有时会遇到需要页面截图或指定区域截图需求。今天给大家推荐2个超赞的截图插件。
1、html2canvas
一款超强大的Javascript页面截图类库,star高达21.4K+。支持h5页面截图、区域截图及跨域截图等功能。
下面讲一下如何在vue中使用html2canvas截图。
安装
$ npm i html2canvas -S
使用组件
开始截图
如果大家想要了解更多用法,可以自行去官网查阅资料哈~~
# 文档地址http://html2canvas.hertzen.com/# 仓库地址https://github.com/niklasvh/html2canvas
2、Dom-To-Image
一款超不错的将任意DOM节点转换为用JavaScript编写的矢量(SVG)或光栅(PNG或JPEG)图像的库。star高达6.4K+。
下面介绍下在vue中如何使用domtoimage进行截图。
安装
$ npm i dom-to-image -S
使用组件
开始截图
domtoimage主要的属性
- filter:过滤器节点中默写不需要的节点;
- bgcolor:图片背景颜色;
- height,width:图片宽高;
- style:传入节点的样式,可以是任何有效的样式;
- quality:图片的质量,也就是清晰度;
- cacheBust:将时间戳加入到图片的url中,相当于添加新的图片;
- imagePlaceholder:图片生成失败时,在图片上面的提示,相当于img标签的alt;
domtoimage主要的方法
- domtoimage.toPng(...); 将节点转化为png格式的图片;
- domtoimage.toJpeg(...); 将节点转化为jpg格式的图片;
- domtoimage.toSvg(...); 将节点转化为svg格式的图片,生成的图片的格式都是base64格式;
- domtoimage.toBlob(...); 将节点转化为二进制格式,这个可以直接将图片下载;
- domtoimage.toPixelData(...); 获取原始像素值,以Uint8Array 数组的形式返回;
最后附上项目地址,可以去了解更多信息。
# 仓库地址https://github.com/tsayen/dom-to-image
ok,就介绍到这里。如果大家有其它优秀的Vue截图组件,欢迎分享交流!