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