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.
Related
I am stuck at this issue. Tainted Canvas, when I am clicking my Snapshot button inside my HTML, enter image description here, I already tried adding crossorigin="anonymous" on my script.
This is my button function
$('#snap').click(function () {
html2canvas(document.getElementById("sfs-page"), {
onrendered: function(canvas) {
var tempcanvas = document.createElement('canvas');
tempcanvas.width=465;
tempcanvas.height=524;
var context=tempcanvas.getContext('2d');
context.drawImage(canvas,465,40,465,524,0,0,465,524);
var link=document.createElement("a");
link.href=canvas.toDataURL('image/jpg');
link.download = 'screenshot.jpg';
link.click();
window.open(link);
}
});
});
whenever I click my button I am getting that error. I am just using basic HTML codes. My sfs-page is the whole div and the canvases that are tainted are hidden.
You should try using allowTaint html2canvas option :
html2canvas(el, {
useCORS: true,
allowTaint: true,
}).then(() => ...);
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 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:
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.
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);