需要匯入的檔案：jquery.min.js，html2canvas.js，canvas2image.js，jquery.qrcode.min.js（如需二維碼）

var shareContent = document.getElementById("imgmodel"); //需要截圖的包裹的（原生的）DOM 物件

var width = shareContent.offsetWidth; //獲取dom 寬度
var height = shareContent.offsetHeight; //獲取dom 高度
var canvas = document.createElement("canvas"); //建立一個canvas節點
var scale = 2; //定義任意放大倍數 支援小數
canvas.width = width * scale; //定義canvas 寬度 * 縮放
canvas.height = height * scale * 1; //定義canvas高度 *縮放
canvas.getContext("2d").scale(scale, scale); //獲取context,設定scale 
var opts = {
scale : scale, // 新增的scale 引數
canvas : canvas, //自定義 canvas
logging : false, //日誌開關
width : width, //dom 原始寬度
height : height//dom 原始高度

};

html2canvas(shareContent, opts).then(function(canvas) {

//生成圖片
var img = Canvas2Image.convertToImage(canvas,canvas.width, canvas.height);

$(".body").append(img);
});

======================================================================

我在移動端開發使用它的時候，遇到了截圖不全的問題，原因是我待截圖部分的內容用的是百分比佈局，後來我換成了固定畫素，藏在最下層

截圖之後，成功的獲取到了全部的內容

這樣做的好處是，上面的scale = 2 ，是放大了兩倍，但是倍數越大導致效能越慢，而且如果包含二維碼，會導致二維碼不清晰

二維碼不清晰的後果是微信長按識別不了

一開始就同時放大待截圖部分，這樣截圖出來的二維碼是很清晰的，大家可以利用藏在背景下面來實現它

這樣我們就能自動生成使用者專屬的二維碼宣傳海報