Vue使用html2canvas将Dom转化为图片

Vue使用html2canvas将页面转化为图片

工具：

官网入口

一、下载

npm install --save html2canvas

二、使用

<template>
	<div>
		<div id="myH5">
			这里就随便写内容了
		</div>
    	<button @click="saveImg('myH5')">合 成</button>
    </div>
</template>
<script>
import html2canvas from "html2canvas"
export default {
    
    
	data() {
    
     },
	methods: {
    
    
		// val传入需要转换的dom的id
		saveImg(val) {
    
    
			window.pageYoffset = 0;
			document.documentElement.scrollTop = 0;
			document.body.scrollTop = 0;
			// 先获取你要转换为img的dom节点
			var node = document.getElementById(val);//传入的id名称
			var width = node.offsetWidth; //dom宽
			var height = node.offsetHeight; //dom高
			var scale = 2; //放大倍数 这个相当于清晰度 调大一点更清晰一点
			html2canvas(node, {
    
    
				width: width,
				heigth: height,
				backgroundColor: "#ffffff", //背景颜色 为null是透明
				dpi: window.devicePixelRatio * 2, //按屏幕像素比增加像素
				scale: scale,
				X: 0,
				Y: 0,
				scrollX: -3, //如果左边多个白边 设置该偏移-3 或者更多
				scrollY: 0,
				useCORS: true, //是否使用CORS从服务器加载图像 !!!
				allowTaint: true //是否允许跨域图像污染画布  !!!
			}).then(canvas => {
    
    
				// console.log("canvas", canvas);
				var url = canvas.toDataURL(); //这里上面不设值cors会报错
				var a = document.createElement("a");//创建一个a标签 用来下载
				a.download = "图片名称"; //设置下载的图片名称
				var event = new MouseEvent("click");//增加一个点击事件
				a.href = url;//此处的url为base64格式的图片资源
				a.dispatchEvent(event); //触发a的单击事件 即可完成下载
			});
		},
	}
}
</script>