1、业务需求:用户投保时保存全页面截图
2、截图插件:html2canvas
使用npm或yarn(可以使用淘宝镜像)
npm install html2canvas
yarn add html2canvas
在需要的页面引入html2canvas
import html2canvas from ‘html2canvas‘
直接上代码
<div ref="imageTofile"> <!-- 页面内容 --> </div> <script> import html2canvas from "html2canvas"; export default { data() { return { ... } }, methods: { // 全屏截图 imgDownload() { let _that = this; // 获取需下载范围元素 let img = this.$refs.imageTofile; // 图片高度 var w = parseInt(window.getComputedStyle(img).width); // 图片宽度 var h = parseInt(window.getComputedStyle(img).height); // 声明画布宽高 let canvas = document.createElement("canvas"); canvas.width = w; canvas.height = h; canvas.style.width = w + "px"; canvas.style.height = h + "px"; // 利用 html2canvas 下载 canvas html2canvas(img, { canvas: canvas, useCORS: true, // 如果页面有跨域的图片,需要加上这个 scrollY: 0 }).then(function(canvas) { let photoUrl = canvas.toDataURL(); // base64图片地址 let conversions = _that.base64ToBlob(photoUrl, "image/png"); window.URL = window.URL || window.webkitURL; // blob对象转换为blob-url let url = window.URL.createObjectURL(conversions); console.log(url); // 图片路径 blob格式,主要是base64的图片格式太长,防止浏览器的url长度限制。 }); }, base64ToBlob(urlData, type) { let arr = urlData.split(","); let mime = arr[0].match(/:(.*?);/)[1] || type; // 去掉url的头,并转化为byte let bytes = window.atob(arr[1]); // 处理异常,将ascii码小于0的转换为大于0 let ab = new ArrayBuffer(bytes.length); // 生成视图(直接针对内存):8位无符号整数,长度1个字节 let ia = new Uint8Array(ab); for (let i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } return new Blob([ab], { type: mime }); } } } </script>
乍看一下好像没啥问题,实际操作你会发现以下几个问题
1、白屏,只截到一部分
这个问题是页面滚动的原因,导致截图白屏,解决方案就是截图之前跳到顶部
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
2、页面宽高比例导致的截图只截了一部分
这种情况是宽高比例的原因导致,解决方法是调整宽高的比例
// 声明画布宽高 let canvas = document.createElement("canvas"); canvas.width = w * 4; // 乘了一个倍率 canvas.height = h * 3.; // 乘了一个倍率 canvas.style.width = w + "px"; canvas.style.height = h + "px"; // 可能跟html5canvas的canvas的初始大小有关,这个倍率跟实际页面的宽高有关
我的页面宽高是414*1946,具体是多少,需要去试。
如果大家有更好的方法,希望给我说一下