div界面元素生成圖片

首先明確一下需求，界面上截取部分元素，生成圖片，用戶能夠長按保存。主要是在微信裏，因此設計到生成二維碼的問題。

一、連接生成二維碼，這裏用qrcode生成，搜索能夠搜到相關的js文件

var myUrl = 'http://test.....';
$(".share_qrcode div.code").qrcode({
    render: "canvas", 
    width: 120, //設置寬高
    height: 120,
    text: myUrl //url地址
});

二、選取部分代碼生成canvas，將canvas轉換爲圖片

var ele = document.getElementById("tacitGrade"); //選取的元素
   html2canvas($("#tacitGrade")[0]).then(function(canvas) {
　　document.getElementById("canvas").appendChild(canvas);  //生成canvas
　　var imgSrc = $("#canvas canvas")[0].toDataURL("image/png");  //canvas生成圖片
　　$("#img").attr('src', imgSrc);
 });

三、測試了一下，能夠保存圖片，二維碼頁能夠加載出來，

這裏存在一個問題是在微信裏 在生成的圖片並無保存時直接長按識別二維碼，不能識別，可是隻是界面元素，即在canvas生成圖片的前一步能夠正確識別二維碼並跳轉。

解決方案是生成圖片並設置透明度，即掃描時的二維碼是當以前的圖片，長按保存的圖片是生成後的總體圖片。