摘要：所以決定完善這篇文章的內容以下我總結了一些注意事項，在代碼中注釋了，僅供參考。

Author:youzebin (2016.12.6)
插件下載地址：https://github.com/niklasvh/h...

1.首先引入html2canvas.js html2canvas 0.5.0-beta4 最新版即可

必要步驟1：修改插件的源碼： （修改的地方有兩處）

源碼：

if (options.type === "view") {
                canvas = crop(renderer.canvas, {width: renderer.canvas.width, height: renderer.canvas.height, top: 0, left: 0, x: 0, y: 0});
            } else if (node === clonedWindow.document.body || node === clonedWindow.document.documentElement || options.canvas != null) {
                canvas = renderer.canvas;
            } else {
                canvas = crop(renderer.canvas, {width:  options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: 0, y: 0});

            }

改為：

if (options.type === "view") {
                canvas = crop(renderer.canvas, {width: renderer.canvas.width, height: renderer.canvas.height, top: 0, left: 0, x: 0, y: 0});
            } else if (node === clonedWindow.document.body || node === clonedWindow.document.documentElement) {
                canvas = renderer.canvas;
            }else if(options.scale && options.canvas !=null){
                log("放大canvas",options.canvas);
                var scale = options.scale || 1;
                canvas = crop(renderer.canvas, {width: bounds.width * scale, height:bounds.height * scale, top: bounds.top *scale, left: bounds.left *scale, x: 0, y: 0});
            }
            else {
                canvas = crop(renderer.canvas, {width:  options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: 0, y: 0});
            }

源碼：

return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) {
    if (typeof(options.onrendered) === "function") {
        log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
        options.onrendered(canvas);
    }
    return canvas;
});

改為：

width = options.width != null ? options.width : node.ownerDocument.defaultView.innerWidth;
height = options.height != null ? options.height : node.ownerDocument.defaultView.innerHeight;
return renderDocument(node.ownerDocument, options, width, height, index).then(function(canvas) {
    if (typeof(options.onrendered) === "function") {
        log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
        options.onrendered(canvas);
    }
    return canvas;
});

2.使用方式

var shareContent = document.getElementById("shareContent");//需要截圖的包裹的（原生的）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; //定義canvas高度 *縮放
canvas.getContext("2d").scale(scale,scale); //獲取context,設置scale 
var opts = {
    scale:scale, // 添加的scale 參數
    canvas:canvas, //自定義 canvas
    logging: true, //日志開關
    width:width, //dom 原始寬度
    height:height //dom 原始高度
};

html2canvas(shareContent, opts).then(function (canvas) {
    //如果想要生成圖片 引入canvas2Image.js 下載地址：
    //https://github.com/hongru/canvas2image/blob/master/canvas2image.js
    var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);
    console.log(img);
});

（不好意思各位，最近發現上面插件的使用方式上存在截圖不完整的bug，
很多人在插件的使用上存在各種各樣的問題。所以決定完善這篇文章的內容）

以下我總結了一些注意事項，在代碼中注釋了，僅供參考。
付：完整使用的demo ,如下：

    
    
    
    
    
    
    
    



    

        

              

                  
文字，圖片等內容
              
        
    
    

前面的內容沒看過,沒下載過html2canvas.js 沒按照插件改過說明操作的先改好再說

注意元素的樣式的使用：
外層元素width 不能使用百分比 ,避免導致圖片與文字間縮放比例問題

錯誤使用方式如  
 .container {
       width:50%;
       margin: 0 auto;
 } 

需要改成如：

 .container {
       width:300px;
       margin: 0 auto;
 } 

完整demo下載地址 github: https://github.com/omwteam/ht...
覺得好用就點個贊唄