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:
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 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 am using "html2canvas" + to change html chart to image. when bars are having black color style its gets converted fine. but when html bars having gradient CSS it does not converted. Attaching screenshots here.
html2canvas(elementDom, {[enter image description here][1]
onrendered: function (canvas) {
getCanvas = canvas;
var imgageData = getCanvas.toDataURL("image/png");
var newData = imgageData.replace('data:image/png;base64,','');
});
I am trying to capture whole "div container" in one image using html2canvas. For some reason im only getting the part which shows on my screen. But I have a horizontal scroll on the div so I would like to capture whats not on my screen aswell but the content inside the div.
Is that possible? Right now my div is 5000px width, can i capture it all in one image somehow?
Here is my javascript code for html2canvas:
$(function() {
$("#btnSave").click(function() {
});
html2canvas($("#container_wrapper_anatomy"), {
onrendered: function(canvas) {
theCanvas = canvas;
var dataUrl = canvas.toDataURL();
window.open(dataUrl, "toDataURL() image", "width=100%, height=100%");
canvas.toBlob(function(blob) {
saveAs(blob, "container_wrapper_anatomy.jpg");
});
}
});
});
});
Thanks in advance.
Using html2Canvas , I can change body element to canvas in this fiddle ,
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
but when I get div element by ID using this code ,
html2canvas($('#mainDiv'), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
I can't change this div to canvas . How can I fix it ?
Once you ensure that jQuery is included in your jsFiddle, rendering the element works as intended. Here's a demo.