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 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);
In my application I'm using html2canvas for converting a HTML in to canvas and after that i'm converting that canvas to image using toDataURL() every thing fine in chrome the image is downloading soon after the page loads, but in safari the image loading in a the same page without downloading.
$(document).ready(function(e) {
html2canvas(document.body, {
onrendered: function(canvas) {
var test = document.getElementsByClassName('test'); //finding the div.test in the page
$(test).append(canvas); //appending the canvas to the div
var canvas = document.getElementsByTagName('canvas');
$(canvas).attr('id','test'); //assigning an id to the canvas
var can2 = document.getElementById("test");
var dataURL = can2.toDataURL("image/png");
document.getElementById("image_test").src = dataURL; //assigning the url to the image
$(canvas).remove(); //removing the canvas from the page
download(can2,'untitled.png');
function download(canvas_name,filename)
{
var tempLink = document.createElement('a');
e;
tempLink.download = filename;
tempLink.href = dataURL;
if (document.createEvent) // create a "fake" click-event to trigger the download
{
e = document.createEvent("MouseEvents");
e.initMouseEvent("click", true, true, window,0, 0, 0, 0, 0, false, false, false,false, 0, null);
tempLink.dispatchEvent(e);
}
else if (tempLink.fireEvent)
{
tempLink.fireEvent("onclick");
}
}
},logging:true,background: "#fff",
});
});
Can anybody help me what i nee to change to download the file in Safari?
iOS limitations
The iOS there are limitations which prevent direct download (practically almost all formats), where images can be downloaded holding the "touch".
The best alternative to this would be to open an "alert" with instructions and after the alert to close call "window.open" with the image.
See the code with an alternative to "iOS"
BUG in Safari (PC and MAC - non iOS - is no problem in webkit technology, but in the browser)
I tried append anchor, create "ghost-iframe" and replace mimetype: application/download.
Download manager open, but not add file after click in "Save" or "Open".
In my opinion this is a BUG in Browser (not is an issue of Webkit, the issue is of Safari).
See code:
$(document).ready(function(e) {
var ghostFrame = document.createElement("iframe");
ghostFrame.name = "myFrame";
document.body.appendChild(ghostFrame);
html2canvas(document.body, {
onrendered: function(canvas) {
var test = document.getElementsByClassName('test'); //finding the div.test in the page
$(test).append(canvas); //appending the canvas to the div
var canvas = document.getElementsByTagName('canvas');
$(canvas).attr('id','test'); //assigning an id to the canvas
var can2 = document.getElementById("test");
var dataURL = can2.toDataURL("image/png");
document.getElementById("image_test").src = dataURL; //assigning the url to the image
$(canvas).remove(); //removing the canvas from the page
var tempLink = document.createElement('a'), e;
tempLink.download = 'untitled.png';
if (/(iPad|iPhone|iPod)/g.test(navigator.userAgent)) { //iOS = Iphone, Ipad, etc.
alert("Instructions...");
tempLink.target = "_blank";
tempLink.href = dataURL;
} else {
tempLink.target = ghostFrame.name;
tempLink.href = dataURL.replace(/^data[:]image\/png[;]/i, "data:application/download;");//force download
}
if (document.createEvent) // create a "fake" click-event to trigger the download
{
e = document.createEvent("MouseEvents");
e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
tempLink.dispatchEvent(e);
} else if (tempLink.fireEvent) {
tempLink.fireEvent("onclick");
}
},
logging:true,
background: "#fff",
});
});
Alternative solution (not work in iOS):
You will have to upload the file to the server and then set the required headers for download, see:
Upload image
Download image with .htaccess (add "htaccess" just the folder that the images are generated by <canvas>.toDataURL)
Download image with PHP
I'm working on a web application using JSF and Javascript. I have a question about how to open a pop-up and add information into it.
Indeed, i'm using html2canvas to get the image of the content of a HTML page.
This is the code of my js :
function openPopupWithScreenshot(){
html2canvas($('#contentBody'), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png");
window.open(img);
}
});
}
And the code of my button in JSF:
<h:commandButton value="#{bundle.button_print}" onclick="openPopupWithScreenshot();"/>
The code works perfectly, when i click on the button, a popup appears with my image. But my problem is I want to add more information (stored in a Javabean) into my popup.
Schematically, i want that my popup displays my image and a String stored in my Javabean. I'm a noob in javascript and i don't know how to do.
Could you help me please?
Thank you.
EDIT :
I have tried this :
function ouvrirPopupAvecImprEcran(){
html2canvas($('#contentBody'), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png");
var newImg = window.open(img);
newImg.document.write("<title>TITLE</title>");
newImg.document.write("<img src='"+ img.src +"'/>");
newImg.document.write("<p>TEST</p>");
}
});
}
My popup appears correctly but my image is not display because it doesn't find the source of my image. How could i modify this?
You was almost there, try this:
function ouvrirPopupAvecImprEcran(){
html2canvas(document.body, {
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png");
var newImg = window.open();
newImg.document.write("<title>TITLE</title>");
newImg.document.write("<img src='"+ img +"'/>");
newImg.document.write("<p>TEST</p>");
}
});
}
The image you created from canvas here var img = canvas.toDataURL("image/png"); was not the HTML Element img. It was a string with data: URL, it's like an image encoded into string.
To understand it better you could look at HTMLCanvasElement#toDataURL() method here http://developer.mozilla.org/en/docs/Web/API/HTMLCanvasElement