页面转图片（html2canvas）

需求：在手机端页面上点击“生成海报”按钮，弹出一张海报(带个人信息)，此海报可以保存或分享。

分析：初步想法是把海报先线下生成图片，然后动态加入二维码，但是结果是只分享了线下生成的图片，二维码没有随图片分享出去。

因此，必须把二维码动态加入后再生成图片分享。

实现：

1、首先下载html2canvas所需的js文件：html2canvas.min.js

2、在页面上添加2个div，一个用于展示海报的内容(hideHaibao)，一个用于展示海报图片(popHaibao)。

3、页面初始化时，生成二维码，用到jquery.qrcode.min.js。点击按钮生成海报。

代码如下：

<html>
<body>
  <div id="hideHaibao" style="display:block;width:100%;z-index:-999;">
  <!-- 这个div对客户不可见，但是不能使用display：none，否则截图没有内容。这个div必须充满整个页面，否则会有多余的内容截进去-->
      <h1>这里是海报内容</h1>
       <div id="output" ></div><!--用于存放个人信息，如二维码-->
  </div>

  <div id="popHaibao" style="display:none;">
     <div id="imgDiv" style="width:100%"></div>
  </div><!--这个div用于存放海报图片，并展示给客户。添加width:100%是因为截图不一定和容器div的宽度一致，会产生横向滚动条-->

  <div><button onclick="javascript:show();">展示海报</button></div>
</body>
</html>

jQuery(function(){
    var str = "";//这里是扫二维码跳转的地址，带上个人信息
    jQuery("#output").qrcode({reder:'canvas',text:str,width:100,height:100});
})

function show(){
   /* 如果只是实现功能，那么最后的html2canvas()方法就够了，但是这样生成的图片清晰度不高，
添加下面这些设置可以图片变清晰。原理就是先把canvas的长宽加倍，绘画后放到固定大小的容器里，把图片压缩达到清晰的效果*/
    var dom = $("#hideHaibao");//需要截图的div
    var width = dom.width();
    var height = dom.height();

    var scale = 2;//这个是倍率，
    var canvas = document.createElement("canvas");
    canvas.width = width * scale;
    canvas.height = height * scale;

    var context = canvas.getContext("2d");
    context.scale(scale,scale);//把canvas中的绘图长宽增加相应倍数

    //调用以下代码需要导入html2canvas.js
    html2canvas(document.querySelector("#hideHaibao"),{
         canvas: canvas,//把自己设置好的canvas传入，供使用
         onrendered:function(canvas){
               var image = new Image();
               image.src = canvas.toDataURL("image/png");
               document.getElementById("imgDiv").appendChild(image);
         }
    });

    $("#popHaibao").show();
}

总结：虽然网上可以搜出一堆一样的解决方式，但是自己好好整理写一遍总归没有坏处。

页面转图片（html2canvas）

猜你喜欢