html2canvas.js实现页面存图

年末账单生成海报图片

导入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>

代码来自公司大佬封装,具体使用方式如上,强记一波