h5 html页面生成图片

h5 html页面生成图片

引入html2canvas.min.js

<div class="success_content">
		<!--页面生成图片存放-->
		<div class="shareImg" id="shareImg"></div>
		<!--需要生成得内容-->
		<div class="center_main" id="posterId">
			<p class="p1">长按图片保存到相册</p>
			<p class="p2">打开微信识别二维码</p>
			<img class="qr" src="pic3.png" alt="">
			<dl>
				<dd>添加客服实时查询进度</dd>
				<dd>获得更多赠品</dd>
			</dl>
		</div>
</div>

<script>

	function parseValue(value) {
		return parseInt(value, 10);
	}
	errMsg("图片生成中。。",3000)
	setTimeout(function () {
		generateImage()
	}, 3500)
	function generateImage() {

		// 获取想要转换的dom节点
		var dom = document.querySelector("#posterId");
		var box = window.getComputedStyle(dom);

		// dom节点计算后宽高
		var width = parseValue(box.width);
		var height = parseValue(box.height);

		// 创建自定义的canvas元素
		var canvas = document.createElement("canvas");

		// 获取画笔
		var context = canvas.getContext("2d");

		// 设置需要生成的图片的大小
		var w = document.getElementById("posterId").style.width;
		var h = document.getElementById("posterId").style.height;

		html2canvas(dom, {
        backgroundColor: null,//可设置背景色
        canvas: canvas,
        useCORS: true
      }).then(function (canvas) {
			// 将canvas转换成图片渲染到页面上
			var url = canvas.toDataURL("image/png"); // base64数据
			var image = new Image();
			image.src = url;
			var shareImg = document.getElementById("shareImg");
			image.style.width = "100%";
			image.style.height = "100%";
			shareImg.appendChild(image);
			shareImg.style.opacity = "1";
		});
	}
</script>

在服务器上运行查看效果