13

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?

mpla_mpla
  • 313
  • 1
  • 2
  • 12
  • if you try to use that it would not produce the photo of a plane that was in the canvas – mpla_mpla Jun 20 '15 at 07:30
  • I have [edit]-ed your question to explain what *doesn't work* exactly mean. You might take the [tour] and visit the [help] while you wait for the answers. – rene Jun 20 '15 at 07:35
  • I see a few things in your code that's... off. Remove quotes around canvas name variable here: `var myCanvas = document.getElementById('name_of_canvas');`, use `myCanvas` instead of `canvas` here: `var ctx2 = canvas.getContext('2d');` – Niddro Jun 20 '15 at 08:47
  • Thank you fixed, though that was not the problem, it was working before my fault while copy paste, the problem is that it does not give me the right value of dataurl for any picture. In your system can you make this work? – mpla_mpla Jun 20 '15 at 10:52
  • Do you sure that `ctx2.drawImage(img3,0,0);` called? – outoftime Jun 20 '15 at 11:56
  • Depending on how you are loading the images the canvas might be tainted - https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image - and so you cannot get the data URL and instead will get an error. If you just want to draw one canvas in to the other you can pass in the canvas to the drawImage method (`ctx2.drawImage(canvas,0,0);`) – lemieuxster Jan 27 '19 at 01:38
  • 1
    You need to call toDataURL **after** you drawn your image on the canvas. Otherwise, of course your canvas is empty... – Kaiido Jan 27 '19 at 08:54

1 Answers1

1

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.

outoftime
  • 715
  • 7
  • 21
  • 1
    No. I have passed a valid base 64 to the other canvas. The problem is with the dataURL, in my opinion at least. Though, if you can use the above code to upload an image on the first canvas and get a valid 64 i will be happy to accept the answer:) – mpla_mpla Jun 20 '15 at 14:55