HTML2Canvas DOM（Angular）

Question

我是JS和開發人員的新手，但我希望能得到一些幫助，解決一直困擾我幾天的問題。

基本上，我試圖讓HTML2Canvas和Angular一起玩。我有一個div（ID是「發票」）內的部分我的HTML文件之一，我在我的控制下：

sampleApp.controller('InvoiceController', function($scope) { 
    $(document).ready(function(){ 
    var source = document.getElementById('invoice'); 




     $('.submit').click(function() { 

      html2canvas(source, { 
       logging: 'on', 
       allowTaint: 'true', 
      onrendered: function(canvas) { 
        var myImage = canvas.toDataURL("image/jpeg"); 
       window.open(myImage); 
      } 
     }); 



     }); 
}); 

我完全不知所措，爲什麼這不工作。該腳本運行時沒有任何錯誤，但它只是在沒有圖像的情況下踢出一個空白頁面。它看起來像它的東西與DOM，因爲這是我收到的控制檯：

html2canvas: Preload starts: finding background-images html2canvas.js:21 
html2canvas: Preload: Finding images html2canvas.js:21 
html2canvas: Preload: Done. html2canvas.js:21 
html2canvas: start: images: 0/0 (failed: 0) html2canvas.js:21 
Finished loading images: # 0 (failed: 0) html2canvas.js:21 
html2canvas: Renderer: Canvas renderer done - returning canvas obj 

編輯：想我會補充說，另一個原因是我知道這件事情與角的DOM負荷是如何因爲使用document.body作爲var works。然而，我只是想從一個div中創建一個圖像。

Answer 1

下面是我用我的項目中確切的指令，和它的作品對SVG以及從而使圖表太：

(function() { 
    'use strict'; 

angular 
    .module('myModule') 
    .directive('camera', camera); 

camera.$inject = ['$rootScope']; 

/* @ngInject */ 
function camera($rootScope) { 
    var directive = { 
     link: link, 
     restrict: 'A' 
    }; 

    return directive; 

    function link(scope, element, attrs) { 
     $rootScope.$on('capture', function (event, deferred) { 
      event.stopPropagation(); 

      renderSvg(element); 

      //method to render the SVG's using canvg 
      function renderSvg(element) { 
       // First render all SVGs to canvases 
       var elements = element.find('svg').map(function() { 
        var svg = $(this); 
        var canvas = $('<canvas></canvas>'); 
        svg.replaceWith(canvas); 

        // Get the raw SVG string and curate it 
        var content = svg.wrap('<p></p>').parent().html(); 
        content = content.replace(/xlink:title="hide\/show"/g, ""); 
        content = encodeURIComponent(content); 
        svg.unwrap(); 

        // Create an image from the svg 
        var image = new Image(); 
        image.src = 'data:image/svg+xml,' + content; 
        image.onload = function() { 
         canvas[0].width = image.width; 
         canvas[0].height = image.height; 

         // Render the image to the canvas 
         var context = canvas[0].getContext('2d'); 
         context.drawImage(image, 0, 0); 
        }; 
        return { 
         svg: svg, 
         canvas: canvas 
        }; 
       }); 

        // At this point the container has no SVG, it only has HTML and Canvases. 
        html2canvas(element[0], { 
         useCORS: true, 
         allowTaint: true, 
         onrendered: function (canvas) { 
          // Put the SVGs back in place 
          elements.each(function() { 
           this.canvas.replaceWith(this.svg); 
          }); 

          var dataURL = null; 

          try { 
           dataURL = canvas.toDataURL("image/png", 0.9); 
           deferred.resolve(dataURL); 
          } 
          catch (e) { 
           deferred.reject(e); 
          } 
         } 
        }); 
      } 
     }); 
    } 
} 
})(); 

參考上面的指令中，並使用下面的代碼在你的控制器來調用指令中的功能如下：

 var deferred = $q.defer(); 
     $scope.$emit('capture', deferred); 

      deferred.promise.then(function (screenshot) { 
       //do something with screenshot (Base64Url for .png type) 
      });