无法在AngularJS应用程序中调用html2canvas

时间:2016-08-15 15:45:28

标签: javascript angularjs html2canvas

在我的控制器中,我定义了html2canvas函数,如:

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

从UI我可以调用createPDF函数,但是html2canvas中的警报没有被触发,所以我的函数canvasToImageSuccess没有被执行。

我在这里遗漏了什么吗?

我试图将html2canvas注入“global.html2canvas = require(”html2canvas“);”但这不起作用。

我检查了控制台,但没有错误。

0 个答案:

没有答案