前端 使用html2canvas.js 生成海报

时间:2024-03-06 15:45:56

1.设定一个要生成海报的元素

<div id="viewBox" res="box">内容....</div>

2.引进js

Poster:function(){
	var that = this;
	var DomeW=that.$refs.box.offsetWidth;//获取目标元素的宽高
	var DemoH = that.$refs.box.offsetHeight;//获取目标元素的宽高
	html2canvas(document.querySelector("#viewBox"),{useCORS:true,width:DomeW,height:DemoH}).then(function(canvas) {
	var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
	 console.log(imgUri );//生成图片base64
	})
},

相关文章