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:樣式根據需求自己搞定吧

效果圖 還算標清吧 哈哈哈哈哈