vue中使用html2canvas及解決html2canvas截屏圖片模糊問題

最近在項目中用到了html2canvas插件，遇到的一些坑寫下來，與大家共勉。

html2canvas  官方網站http://html2canvas.hertzen.com/index.html

這是一個js截屏插件，在前台利用h5的canvas  將html的內容顯示在canvas上，再利用 js 將canvas轉化為圖片

1.vue 文件中引入 html2canvas.js

 <remote-script src="../html2canvas.js"></remote-script> 

說明：src中的路徑是html2canvas.js在項目中的路徑

remoteScript 標簽是上篇博客定義的標簽，詳情見：http://www.cnblogs.com/zhuchenglin/p/7455203.html

2.在vue中使用該插件，在methods中定義一個方法，內容為：

setTimeout(function () {
　　html2canvas(dom,{
  　　　　  onrendered:function (canvas) {
       　　 var image = new Image();
      　　  image.src = canvas.toDataURL();
     　　   document.getElementById('content_img').appendChild(image)
     　　   dom.style.display='none'
  　　　　 },
　　});
},0)

這樣就可以了

說明：
在方法中如果不加 setTimeout函數的話，雖然使用console輸出的dom內容正常，但是如果在vue中定義的變量中的內容在canvas中顯示不出來，可能與vue的聲明周期有關，這個暫時不清楚，加上setTimeout函數之后，會將此函數中的操作加到處理隊列末尾

在拿到canvas后，轉化為圖片，直接就可以使用了。

 

 3.關於html2canvas截出來的圖片模糊的問題，我查了好多資料，試了好多方法，最終找到一篇非常有用的文章 https://segmentfault.com/a/1190000007707209

方法如下：

(1.修改插件的源碼

<1.代碼第999行renderWindow的方法中修改判斷條件，增加一個options.scale存在的條件：

將　　　　　　　

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});
            }

2.代碼第 943 行 html2canvas 的方法中 修改width,height：

將

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;
});

然后就可以使用了，將原來的使用放式稍微還一下就可以了，使用實例如下：

在vue的方法中添加一個獲取設備像素密度的方法　

 getPixelRatio(context){
     var backingStore = context.backingStorePixelRatio ||
             context.webkitBackingStorePixelRatio ||
             context.mozBackingStorePixelRatio ||
             context.msBackingStorePixelRatio ||
             context.oBackingStorePixelRatio ||
             context.backingStorePixelRatio || 1;
       return (window.devicePixelRatio || 1) / backingStore;
},

然后將最上面的使用示例改為：

  get_img(){
      let self = this;
      setTimeout(function () {
      var content_html = document.getElementById('content_html');　　　　//要轉化的div
      let width = content_html.offsetWidth;
      let height = content_html.offsetHeight;
      let offsetTop = content_html.offsetTop;
      let canvas = document.createElement("canvas");
      let context = canvas.getContext('2d');
      let scaleBy = self.getPixelRatio(context);
      canvas.width = width*scaleBy;
      canvas.height = (height+offsetTop)*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(content_html,opts).then(function (canvas) {
     　　canvas.style.width = width+"px";
        canvas.style.height = height+"px";
        var image = new Image();
        image.src = canvas.toDataURL();
        document.getElementById('content_img').appendChild(image);　　　　　　//將轉化好的圖片插入到防止圖片轉換的div中
        content_html.style.display='none'
     });
}

然后在html2canvas插件加載成功后調用get_img()方法即可將比較清晰的圖片插入到指定位置 

注：如需轉載請注明出處：http://www.cnblogs.com/zhuchenglin/p/7455336.html