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);
Related
Html2canvas is really cool but:
The function is "simple":
$scope.generateScreenshot = function () {
html2canvas($("#screen-shot"), {
onrendered: function(canvas) {
// canvas is the final rendered <canvas> element
var myImage = canvas.toDataURL("image/png");
window.open(myImage);
}
});
}
Any ideas why there is an issue with rendering title ?
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') ;
}
})
})
})
}
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;
}
});
I have been dealing with this for a bit but I can't seem to get it to work. Onclick to resulting png image is empty. See the code below....
function svgToCanvas (targetElem,fileName) {
var nodesToRecover = [];
var nodesToRemove = [];
var svgElem = targetElem.find('svg');
console.log(svgElem);
svgElem.each(function(index, node) {
var parentNode = node.parentNode;
var svg = parentNode.innerHTML;
var canvas = document.createElement('canvas');
canvg(canvas, svg);
nodesToRecover.push({
parent: parentNode,
child: node
});
parentNode.removeChild(node);
nodesToRemove.push({
parent: parentNode,
child: canvas
});
parentNode.appendChild(canvas);
});
html2canvas(targetElem, {
allowTaint: true,
onrendered: function(canvas) {
var theName = fileName + ".png";
prev_img = theName;
var a = document.createElement('a');
a.href = canvas.toDataURL();
a.download = theName;
a.click();
}
});
}
#Running the function..
var theDiv = $('#divContainingSVG');
var fileNm = "imageName";
svgToCanvas(theDiv, fileNm);
Not sure where to go next. I simply need to convert the image to a png and then save it to the server. When testing the download version the resulting png is blank. Note that I'm using... canvg.js (including rgbcolor.js) and html2canvas.svg.js
Thanks in advance!
Actually it turns out that this function works fine. The issue was a conflict with another function that was included, by mistake, to get the svg.
Iam using Html2Canvas.js for converting a div into canvas
var canvasimage="";
html2canvas($("#dvorder"), {
onrendered: function (canvas) {
theCanvas = canvas;
$('#imgDemo').append(canvas);
$('#imgDemo canvas').attr('id', 'Billcan');
canvasimage = document.getElementById('Billcan').toDataURL("image/png");
}
});
How to get the value of variable canvasimage outside the html2Canvas
please refer to jsfiddle:
http://jsfiddle.net/8ypxW/3/