Unable to call html2canvas in AngularJS application

Question

In my controller I am defining html2canvas functions like:

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

From UI I am able to call createPDF function however, the alert in html2canvas is not getting fired and so my function canvasToImageSuccess does not get executed.

Am I missing anything here?

I tried to inject html2canvas as global.html2canvas = require("html2canvas"); but this is not working.

I checked console, but there is not error.

Answer 1

The fix was that the html2canvas needs element and not the html text.

so, line:

html2canvas(source,

should be:

html2canvas($("#formData"),