年末賬單生成海報圖片

匯入js檔案

<script type="text/javascript" src="/lab/js/html2canvas.js"></script> 

預設儲存圖片的div和生成部分展示

<!-- 要生成海報的頁面 -->
<div class="page" id="page6">
  <p class="page6_title page6_top_des">全年總支出</p>
  <p class="all_money">￥26,138,732.00元</p>
 

  <p class="page6_title page6_use_des">購買去向</p>
  <div class="money_use">
    <p>購買肥料：<span class="money_des chemical">￥821378</span> </p>
    <p>購買農藥：<span class="money_des pesticides">￥821378</span>　</p>
    <p>其　　它：<span class
 
="money_des other">￥821378</span>　</p>
  </div>
  <p class="page6_title page6_discount_des">優惠節省</p>
  <div class="discount_detail">
    <p>領取的豐收幣個數：<span class="discount_des discount_detail_points">21386</span>   </p>
    <p>領取的優惠券數量：<
 
span class="discount_des discount_detail_voucher_count">58張</span></p>
    <p>贈送現金總金額：<span class="discount_des wallet">￥73895元</span></p>
    <p>累計全年幫你節省：<span class="discount_des all_wallet">671328元</span> </p>
  </div>
  <div class="username">一條傻狗子</div>
  <div class="page6_line1"></div>
  <div class="page6_line2"></div>
  <div class="page6_line3"></div>
  <div class="page6_btn_group">
  	<div class="page6_btn page6_btn_left" id="btnCreateImg">生成年度賬單海報</div>
  	<div class="page6_btn page6_btn_right to_share">分享開啟2019年</div>
  </div>
</div>

<!-- 生成海報存放處 -->
<div id="resultBox">
</div>

js邏輯處理

<script type="text/javascript">
    var showLoad = function() { //圖片生成的載入事件
      var mload = $('#mloader');
        if (mload.length == 0) {
            mload = $('<div class="pub_load_bg" id="mloader"><div class="m_loading"><div class="loading_icon"></div><div class="loading_txt">圖片努力生成中...</div></div></div>').appendTo('body');
        }
      mload.show();
    };
    var closeLoad = function() { //載入動畫隱藏
        $('#mloader').hide();
    };
    var main = {
        init:function(){
            main.setListener();
        },
        //
        setListener:function(){
            var btnCreateImg = $("#btnCreateImg");//註冊點選事件,觸發生成海報
            btnCreateImg.on("click",function(){
				$(document.body).animate({scrollTop: '0px'}, 0);
                showLoad();
				setTimeout(function(){
					main.html2Canvas();
				},1000);                
			})
        },
        //
        getPixelRatio:function(context){
            var backingStore = context.backingStorePixelRatio ||
                    context.webkitBackingStorePixelRatio ||
                    context.mozBackingStorePixelRatio ||
                    context.msBackingStorePixelRatio ||
                    context.oBackingStorePixelRatio ||
                    context.backingStorePixelRatio || 1;
            return (window.devicePixelRatio || 1) / backingStore;
        },
        //
        html2Canvas: function () {
            var saveContent = $("#page6")[0];//要生成的頁面位置
            var width = saveContent.offsetWidth;  
            var height = saveContent.offsetHeight; 
            var offsetTop = saveContent.offsetTop;  
            var canvas = document.createElement('canvas');  
            var context = canvas.getContext('2d');
            var scaleBy = main.getPixelRatio(context);  
            canvas.width = width * scaleBy;   
            canvas.height = (height + offsetTop) * scaleBy;  
            context.scale(scaleBy, scaleBy);
            var opts = {
                allowTaint:true,
                tainttest:true, 
                scale:scaleBy, 
                canvas:canvas, 
                logging: false, 
                width:width, 
                height:height ,
                background: '#d9e9f5'
            };
            html2canvas(saveContent, opts).then(function (canvas) {
                $("#resultBox").html(main.convertCanvasToImage(canvas));
                closeLoad();
				$("#btnCreateImg").text("長按儲存結果");
                $("#result_img").hide();
            });
        },
        convertCanvasToImage: function (canvas) {
           var image = new Image();
           image.src = canvas.toDataURL("image/png");
           return image;
        }
    };

   main.init();
</script>

程式碼來自公司大佬封裝,具體使用方式如上,強記一波