首先   做一個  要截圖的容器，也就是包頁面的div,

<div id = 'shareContent'>

</div>

<div id='img'></div>

再容器中正常寫入內容，如果頁面中有圖片元素的情況下，圖片內容的‘opacity’需要設定為 ‘1’，不可為‘0’，否則會繪製不出來。

頁面內容轉為canvas需要引入外掛 html2canvas.js 和 canvas2image.js

下面貼出程式碼：

function setCanvas(){
var main = {
init: function() {
main.setListener();
},


//獲取畫素密度
getPixelRatio: function(context) {
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return(window.devicePixelRatio || 1) / backingStore;
},
//繪製dom 元素，生成截圖canvas
html2Canvas: function() {
var shareContent = $("#shareContent"); // 需要繪製的部分的 (原生）dom 物件 ，注意容器的寬度不要使用百分比，使用固定寬度，避免縮放問題
var width = shareContent.width(); // 獲取(原生）dom 寬度
var height = shareContent.height(); // 獲取(原生）dom 高


var canvas = document.createElement('canvas'); //建立canvas 物件
var context = canvas.getContext('2d');
var scaleBy = main.getPixelRatio(context); //獲取畫素密度的方法 (也可以採用自定義縮放比例)
canvas.width = width * scaleBy; //這裡 由於繪製的dom 為固定寬度，居中，所以沒有偏移
canvas.height = (height) * scaleBy; // 注意高度問題，由於頂部有個距離所以要加上頂部的距離，解決影象高度偏移問題
context.scale(scaleBy, scaleBy);


var opts = {
allowTaint: true, //允許載入跨域的圖片
tainttest: true, //檢測每張圖片都已經載入完成
scale: scaleBy, // 新增的scale 引數
canvas: canvas, //自定義 canvas
logging: true, //日誌開關，釋出的時候記得改成false
width: width, //dom 原始寬度
height: height //dom 原始高度
};
html2canvas(shareContent, opts).then(function(canvas) {
//canvas轉img
//$("body").append(canvas);
var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);
$("#img").append($(img));
$("#img").show();
});
}
};


setTimeout(function() {
main.html2Canvas();
}, 500)


}


//注意最後html轉canvas會出現部分圖片消失的情況，將圖片路徑轉為base64位即可

最後通過 append將轉換後的img元素插入到 ‘img’標籤中,實現圖片轉換。