js截屏工具(html2anvas)

首先不会像其它文章一样把文档搬过来解释一边。而是在实际项目中实际使用来写。

目录


前言

网上可以查到的方法有几种,有使用canvas截图的还有使用插件截图的。这里我是用html2canvas插件就是图它的比较易用,下面就是我实际使用和使用中遇到的坑来讲解一下。


一、用前须知

1、首先根据文档上的描述,它是根据页面上所展示的dom元素进行截图。
2、还有一定的限制,并不是所有的css样式都有作用。但是不用担心大部分是支持的。这是一个官方支持css属性的链接附上css属性支持列表
3、最重要的一点就是图片要是同源的。如果图片跨域就会导致截图之后图片丢失,我也遇到了,下面会说解决办法。

二、项目实际使用

1、项目描述

1、项目需求是根据页面所展示内容生成海报,并长按进行图片保存
2、页面中展示的海报是api返回(存在跨域问题)

2、使用步骤

1、页面中的主要结构自己写就好,每个需求不一样
2、安装

npm install html2canvas
import html2canvas from 'html2canvas';

3、使用

onMakePicture() {
	//这是选择你要进行截屏的dom
   const dom = this.$refs.picDom
   html2canvas(dom).then(function (canvas) {
     // console.log('canvas',canvas)
     const link = document.createElement("img");
     link.src = canvas.toDataURL();
     link.style.width = "100%";
     link.style.height = "100%";
     link.style.position = "absolute";
     link.style.top = "0";
     link.style.left = "0";
     dom.appendChild(link);
   });

 },

3、图片跨域问题

1、由于直接由api返回的图片为在线图片,所以必然跨域,所以可以想到的解决办法就是将图片转为base64,那转为base64的图片可以由前端转也可以由后端转。当然自己要试一试,可以是多方尝试,还是跨域,最后没办法还是请后端的同学转了,可以正常显示了。

4、css样式问题

1、我是将接口返回的图片使用background-image来设置的,这样显示没什么问题,但是发现在使用html2canvas的时候在电脑的浏览器中测试没有发现任何问题,也能正常生成图片,但是经过手机测试,发现没生成。可能是由于手机没有电脑处理速度快,在遍历dom元素时,由于图片的base64字符串太长,所以来不及渲染出来,所以导致背景图片丢失,所以猜用img标签,让在加载dom的时候就把背景图片加载好。
额外知识:
1、页面结构先加载,让你后时css
2、html2canvas是通过遍历你所需要生成截图的dom元素进行构造的图片。


最后

附上文档链接:html2canvas

采坑一时爽,一直采坑一直爽。
如果有问题欢迎指出。
如果有帮助欢迎常来。

上一篇:web前端之Javascript---function函数


下一篇:HDFS基本命令行操作及上传文件的简单API