I'm trying to save a canvas with images to PNG, but when I try this:
var myCanvas = document.getElementById("myCanvas");
var img = document.createElement('img');
var ctx = myCanvas.getContext ? myCanvas.getContext('2d') : null;
img.src = 'image.png';
img.onload = function () {
ctx.drawImage(img, 0, 0, myCanvas.width, myCanvas.height);
}
var data = myCanvas.toDataURL("image/png");
if (!window.open(data)) {
document.location.href = data;
}
I only get a blank transparent image without the image. What am I doing wrong?
I'm trying to save a canvas with images to PNG, but when I try this:
var myCanvas = document.getElementById("myCanvas");
var img = document.createElement('img');
var ctx = myCanvas.getContext ? myCanvas.getContext('2d') : null;
img.src = 'image.png';
img.onload = function () {
ctx.drawImage(img, 0, 0, myCanvas.width, myCanvas.height);
}
var data = myCanvas.toDataURL("image/png");
if (!window.open(data)) {
document.location.href = data;
}
I only get a blank transparent image without the image. What am I doing wrong?
Share Improve this question edited May 22, 2014 at 12:23 famousgarkin 14.1k5 gold badges59 silver badges74 bronze badges asked Sep 27, 2012 at 11:52 JaapJaap 1691 gold badge4 silver badges9 bronze badges1 Answer
Reset to default 6You need to put the window.open
call in the load handler since this happens asynchronously.
img.onload = function () {
ctx.drawImage(img, 0, 0, myCanvas.width, myCanvas.height);
var data = myCanvas.toDataURL("image/png");
if (!window.open(data)) {
document.location.href = data;
}
}