Develop Reference

How do you concatenate two or images in pdf using Html2Canvas & JsPDF?

I am trying to wrap my head around HTML2Canvas' API but the documentation is extremely limited. The situation is that I am putting 2 or more div's (thier content) into a single PDF where each div represents a different page. Sounds easy right ? Not really. I have tried everything to make this work, but the asynchournous nature of JS is making this way harder than it has to be.
Here is what I have
html2canvas($("#monthly_agg_report_container"), {
onrendered: function(canvas)
{
var doc = new jsPDF('landscape', 'pt','a2');
var imgData = canvas.toDataURL("image/png");
doc.addImage(imgData,'PNG',0,0,canvas.width*1.33,canvas.height*1.33);
doc.save('report.pdf') ;
}
}).then(function(){
//another html2canvas doesnt work. PDF comes with a empty page. Because `doc` is out of scope
alert('done')
})

This is the code that worked for me:
function generatePDF() {
var doc = new jsPDF('landscape', 'pt','a2');
console.log(doc);
html2canvas($("#monthly_agg_report_container"), {
onrendered: function(canvas)
{
var imgData = canvas.toDataURL("image/png");
doc.addImage(imgData,'PNG',0,0,canvas.width*1.33,canvas.height*1.33);
// doc.save('report.pdf') ;
}
}).then(function(){
html2canvas($("#descriptor_stats_container"), {
onrendered: function(canvas)
{
console.log('2nd doc '+doc);
doc.addPage();
var imgData = canvas.toDataURL("image/png", 1.0);
doc.addImage(imgData,'PNG',0,0,canvas.width*1.33,canvas.height*1.33);
//doc.save('report.pdf') ;
}
}).then(function(){
alert('done')
html2canvas($("#alerts_stats_container"), {
onrendered: function(canvas)
{
console.log('2nd doc '+doc);
doc.addPage();
var imgData = canvas.toDataURL("image/png");
doc.addImage(imgData,'PNG',0,0,canvas.width*1.33,canvas.height*1.33);
doc.save('report.pdf') ;
}
})
})
})
}

html2canvas not work in ie9

I want to convert div to canvas and in chrome it works good but in IE9 it convert it but not good- its cut the div content and change the order of div elements.
witch js should i download that work well in IE9 too?
Someone have any idea how can I resolve this resolution problem?
my js code:
$scope.canvastoimage = function () {
html2canvas($("#mytryapp"), {
proxy: "server.js",
useCORS: true,
onrendered: function(canvas) {
document.body.appendChild(canvas);
$("#img-out").append(canvas);
$("#mytryapp").hide();
printthispage();
}
});
}
The result is attached:
Thanks!

This code works well in all browsers
html2canvas([document.getElementById(mytryapp)], {
onrendered: function (canvas) {
var imageData = canvas.toDataURL('image/png',1.0);
document.getElementById('img-out')[0].innerHTML = imageData;
}
});
Test it and see how it goes. The index 0 is used with jQuery objects to get "real" document element so if you are not using jquery change to this:
html2canvas([document.getElementById(mytryapp)], {
onrendered: function (canvas) {
var imageData = canvas.toDataURL('image/png',1.0);
document.getElementById('img-out').innerHTML = imageData;
}
});

converting svg graphic into image causing problems

I need to convert amChart into an image using canvas. By using the following code:
$(function() {
$("#btnSave").click(function() {
html2canvas($("#widget"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
// Convert and download as image
Canvas2Image.saveAsPNG(canvas);
$("#img-out").append(canvas);
// Clean up
//document.body.removeChild(canvas);
}
});
});
});
But there is problem in the generated image, see the following svg chart in html page
while the generated image:

Duplicate text in svg with html2canvas

I have the plunkr http://plnkr.co/edit/jdAYlcfO5GDru0MMa2fM?p=preview
$.fn.canvas = function(options){
var hids = $(this).find(':hidden');
source = $(this).get(0);
html2canvas(source, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
};
After click on save, text inside svg get printed twice.
Thats not what desired.
How to fix it?

Use
document.body.replaceChild(document.body,canvas);

HTML2Canvas DOM (Angular)

I'm new to JS and development in general, but I was hoping I could get a little help resolving an issue I've been trying to figure out for a couple of days.
Basically, I'm trying to get HTML2Canvas to play with Angular. I have a div (ID is 'invoice') inside one of my partial HTML files, and I have the following in my controller:
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);
}
});
});
});
I'm completely at a loss as to why this doesn't work. The script runs without any errors, but it just kicks out a blank page without an image on it. It looks like it's something with the DOM because this is what I'm getting in the console:
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
EDIT: Thought I'd add that another reason I know it's something with how the DOM loads in Angular is because using document.body as the var works. I'm just looking to make an image out of a single div, however.

Following is the exact directive i am using in my project, and it works for svg as well thus rendering the charts too:
(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);
}
}
});
}
});
}
}
})();
Reference the above directive and use the following code in your controller to invoke the functionality in the directive:
var deferred = $q.defer();
$scope.$emit('capture', deferred);
deferred.promise.then(function (screenshot) {
//do something with screenshot (Base64Url for .png type)
});