vue中使用html2canvas生成图片

1.安装html2canvas插件

npm install --save html2canvas

2.在需要用到的.vue文件中引入

import html2canvas from 'html2canvas'

3.代码片段

说明：如果要被生成图片的dom是超出屏幕需要滚动才能查看的话，需要加上width,height windowWidth,windowHeight 这些属性才能保证截图的完整性， windowHeight的值用document.body.scrollHeight也行，具体看需求如何。

<template><div><button @click="createImg">生成图片并下载到本地</button><button @click="saveImg">生成图片并上传到服务器</button><div ref="content" style="width:200px;height:200px;border:1px solid #333333;">此dom是要被保存成图片的</div></div></template><script>import html2canvas from 'html2canvas'export default {data(){return {}},methods:{createImg(){let content = this.$refs.contentlet scrollHeight = content.scrollHeightlet scrollWidth = content.scrollWidthhtml2canvas(content,{scale: window.devicePixelRatio*2,useCORS: true , //开启跨域配置，但和allowTaint不能共存width:scrollWidth,height:scrollHeight,windowWidth:scrollWidth,windowHeight:scrollHeight,x:0,y:window.pageYOffset}).then((canvas) => {this.operType = 'edit'let dataURL = canvas.toDataURL("image/jpg");let link = document.createElement("a"); link.href = dataURL;let filename = `${new Date().getTime()}.jpg`; //文件名称link.setAttribute("download", filename);link.style.display = "none"; //a标签隐藏document.body.appendChild(link);link.click();})},saveImg(){html2canvas(this.$refs.content,{scale: window.devicePixelRatio*2,useCORS: true , //开启跨域配置，但和allowTaint不能共存width:content.scrollWidth,height:content.scrollHeight,windowWidth:content.scrollWidth,windowHeight:content.scrollHeight,x:0,y:window.pageYOffset}).then((canvas) => {let dataURL = canvas.toDataURL("image/png");this.operType = 'edit'let filename = `${new Date().getTime()}.png`;let file_url = dataURLtoFile(dataURL, filename,"image/png"); //将文件转换成file的格式，就可以使用file_url传递给服务端了let formData = new FormData()formData.append('file',file_url)//这个uploadFile 根据自己上传接口的名字写uploadFile(formData).then(res=>{//此处具体业务具体操作})});},//将base64格式转换成file的格式dataURLtoFile(base64, filename,contentType) {let arr = base64.split(',') //去掉base64格式图片的头部let bstr = atob(arr[1]) //atob()方法将数据解码let leng = bstr.lengthlet u8arr = new Uint8Array(leng)while(leng--){u8arr[leng] = bstr.charCodeAt(leng) //返回指定位置的字符的 Unicode 编码}return new File([u8arr],filename,{type:contentType}) }}}</script>

4.具体的属性可以参考官方文档

5.小记

//1. 生成的背景默认为白色,可以通过 backgroundColor 属性修改背景颜色html2canvas(this.$refs.content, {backgroundColor: null // null 表示设置背景为透明色}.then(img => {});//2.截图有时会错位，是因为不支持某些css属性造成的，调整css样式即可，有时margin 也会有影响。

6.补充

在移动端H5使用中，会有ios截图失效问题，目前的解决方案是 修改html2canvas版本为1.0.0

调用方法如下：

(window.html2canvas || html2canvas)(content,{scale: window.devicePixelRatio, //window.devicePixelRatio * 2useCORS: true, //开启跨域配置，但和allowTaint不能共存width: scrollWidth,height: scrollHeight,windowWidth: scrollWidth,windowHeight: scrollHeight,x: 0,y: 0}).then(canvas => {let url = canvas.toDataURL("image/jpg");console.log(url)this.picUrl = url}).catch(err => {// do sth});