html转化成图片，相当于生成海报，长按保存到手机

html

<div class="tab-con" id="erweima"><div class="erweima-box"><div class="erweima"><div class="top"><span>扫码支付</span><span>排队免单</span></div><div class="img-box"><img src="images/erweima.png" /></div><p>凡参与免单活动的商品/服务<br/>不支持退款，请理性购买！</p></div><div class="erweima-bottom"><span><i class="iconfont icon-wxpay"></i>微信支付</span><div class="right"><img src="images/erweima.png"/><p>关注排呗<br/>排队免单公众号</p></div></div></div>
</div>

js
点击这里，下载html2canvas.min.js

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/html2canvas.min.js" ></script>
$(function() {var canvas2 = document.createElement("canvas");let _canvas = document.querySelector('.tab-con');//需要替换成图片的html区域console.log(_canvas);//获取宽高var w = parseFloat(window.getComputedStyle(_canvas).width);var h = parseFloat(window.getComputedStyle(_canvas).height);console.log(w,h);//将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了canvas2.width = w*2;canvas2.height = h*2;//可以按照自己的需求，对context的参数修改,translate指的是偏移量var context = canvas2.getContext("2d");context.translate(0,-140);context.scale(2,2);html2canvas(_canvas,{canvas:canvas2}).then(function(canvas) {var imgUrl = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url$("#erweima").html('<img class="imgDiv_img" src="'+imgUrl+'" style="width:'+w+'px;height:'+h+'px;"/>');})});

css:样式根据需求自己搞定吧

效果图还算标清吧哈哈哈哈哈
在这里插入图片描述