I am having a canvas in which I upload an image with the following code:
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
Now I wanted to use the canvas.toDataURL() to load the image to another canvas. The code is:
var dataURL = canvas.toDataURL();
drawDataURIOnCanvas(dataURL,canvas2);
function drawDataURIOnCanvas(dataURL, name_of_canvas) {
var myCanvas = document.getElementById(name_of_canvas);
var img3 = new Image;
var ctx2 = myCanvas .getContext('2d');
img3.onload = function(){
ctx2.drawImage(img3,0,0); // Or at whatever offset you like
};
img3.src = dataURL;
}
If I put to this a working url all fine. But the produced url from any picture I have tried comes out as
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII=.
If you try to use that it would not produce the photo of a plane that was in the canvas. How can I use the function toDataURL to draw the image on another canvas?
You can look at example of using HTMLCanvasElement.toDataURL() at developer.mozilla.org
toDataURL returns valid base64 encoded image. So the problem is how you assign this image for second canvas.
来源：https://stackoverflow.com/questions/30951420/canvas-todataurl-not-working-properly