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>
在服务器上运行查看效果