私のようなhtml2canvas機能を定義しています私のコントローラではAngularJSアプリケーション

Question

にhtml2canvasを呼び出すことができません：私はしかしcreatePDF関数を呼び出すことができる午前UIから

var builderApp = angular.module('builderApp', 
 
    ['fg', 'ngSanitize', 'ui.bootstrap', 'angularFileUpload', 'textAngular', 'ui.grid', 'ui.grid.pagination']); 
 
builderApp 
 
    .run(function ($templateCache) { 
 
     $templateCache.put('custom-busy.html', 
 
      "<div class=\"cssload-loader\"><div class=\"cssload-inner cssload-one\"></div><div class=\"cssload-inner cssload-two\"></div><div class=\"cssload-inner cssload-three\"></div></div>" 
 
      ); 
 
    }); 
 

 
builderApp.controller('builderCtrl', function ($scope, formSchema, formData, $http, $filter) { 
 
    var vm = this; 
 
    
 
    $scope.canvasToImageSuccess = function (canvas) { 
 

 
     var margins = { 
 
      top: 50, 
 
      bottom: 80, 
 
      left: 20, 
 
      width: 600 
 
     }; 
 
     var pdf = new jsPDF('p', 'pt', 'a4'), // jsPDF(orientation, unit, format) 
 
     pdfInternals = pdf.internal, 
 
     pdfPageSize = pdfInternals.pageSize, 
 
     pdfScaleFactor = pdfInternals.scaleFactor, 
 
     pdfPageWidth = pdfPageSize.width - (margins.left + margins.left), 
 
     pdfPageHeight = pdfPageSize.height + margins.left, 
 
     totalPdfHeight = 0, 
 
     htmlPageHeight = canvas.height, 
 
     htmlScaleFactor = canvas.width/(pdfPageWidth * pdfScaleFactor), 
 
     safetyNet = 0; 
 
     pdf.setFontSize(22); 
 
     pdf.setFontStyle('italic'); 
 
     pdf.page = 1; 
 
     while (totalPdfHeight < htmlPageHeight && safetyNet < 15) { 
 
      var newCanvas = canvasShiftImage(canvas, totalPdfHeight); 
 

 
      pdf.addImage(newCanvas, 'png', margins.left, margins.top, pdfPageWidth, 0, null, 'NONE'); 
 

 
      pdf.page++; 
 
      totalPdfHeight += (pdfPageHeight * pdfScaleFactor * htmlScaleFactor); 
 

 
      if (totalPdfHeight < htmlPageHeight) { 
 

 
       pdf.addPage(); 
 

 
      } 
 
      safetyNet++; 
 
     } 
 

 
     pdf.save(fileName); 
 
    }; 
 

 
    $scope.createPDF = function() { 
 
     
 
     var source = $("#formData").html(); 
 
     var fileName = "Form1.Pdf"; 
 
     var canvasToImage = function (canvas) { 
 
      var img = new Image(); 
 
      var dataURL = canvas.toDataURL('image/png'); 
 
      img.src = dataURL; 
 
      return img; 
 
     }; 
 
     var canvasShiftImage = function (oldCanvas, shiftAmt) { 
 
      shiftAmt = parseInt(shiftAmt) || 0; 
 
      if (!shiftAmt) { return oldCanvas; } 
 

 
      var newCanvas = document.createElement('canvas'); 
 
      newCanvas.height = oldCanvas.height - shiftAmt; 
 
      newCanvas.width = oldCanvas.width; 
 
      var ctx = newCanvas.getContext('2d'); 
 

 
      var img = canvasToImage(oldCanvas); 
 

 
      ctx.drawImage(img, 0, shiftAmt, img.width, img.height, 0, 0, img.width, img.height); 
 

 
      return newCanvas; 
 
     }; 
 
     
 

 
     try{ 
 
      html2canvas(source, { 
 
       onrendered: function (canvas) { 
 
        alert('rendered'); 
 
        $scope.canvasToImageSuccess(canvas); 
 
       } 
 
      }); 
 
     } 
 
     catch(e) 
 
     { 
 
      var x = e; 
 
     } 
 
    }

を、html2canvasでアラートではありません私の関数canvasToImageSuccessは実行されません。

ここに何か不足していますか？

「global.html2canvas = require（ "html2canvas"）;」とhtml2canvasを注入しようとしましたが、しかし、これは動作していません。

コンソールを確認しましたが、エラーはありません。

Answer 1

修正点は、html2canvasにhtmlテキストではなく要素が必要であるということでした。

ので、ライン：

html2canvas（ソース、

は次のようになります？

html2canvas（$（ "＃FORMDATA"）、