Draw Image to Canvas and encode it via base64

Question

I'm trying to draw an existing image onto a canvas and encode it via base64. Here is my code:

var canvas = document.createElement("canvas");
canvas.id = "MyCanvas";

document.getElementById("Table1").appendChild(canvas);

var myCanvas = document.getElementById("MyCanvas");
var myCanvasContext = myCanvas.getContext("2d");

myCanvas.width = 135;
myCanvas.height = 170;

var img = new Image();

img.onload = function(){
    myCanvasContext.drawImage(img,0,0);
}

img.src = "https://example.com/asd.png";

var toURL = myCanvas.toDataURL();
console.log(toURL);

It draws the image to the canvas, but the toURL is an empty image base64 code with 135x170 size. I've tried to decode it, but it always shows a blank image.

I can't find what is the problem with it.

Yoshi · Accepted Answer · 2019-02-06 14:47:01Z

3

The problem is that myCanvas.toDataURL(); is called before the image is actually loaded. For this you'd need to move it inside the onload-callback, like:

var img = new Image();

img.onload = function(){
    myCanvasContext.drawImage(img,0,0);

    // ...moved here
    var toURL = myCanvas.toDataURL();
    console.log(toURL);
}

img.src = "https://example.com/asd.png";

The following is a simplified example:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();

img.crossOrigin = "";
img.src = 'https://www.gravatar.com/avatar/8939f42cb6c31e31e570ea8f07fe9757?s=32&d=identicon&r=PG';

img.onload = () => {
  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;

  ctx.drawImage(img, 0, 0);

  console.log(canvas.toDataURL());
};

document.body.appendChild(canvas); // append the canvas ...
document.body.appendChild(img); // ... and img for demo purposes only

answered Feb 6, 2019 at 14:47

Yoshi

54.8k14 gold badges93 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sundowatch Over a year ago

It works, thank you! So, it's because of being asynchronous language of JavaScript.

Kolzar · Accepted Answer · 2019-02-06 14:51:38Z

0

var canvas = document.createElement("canvas");
canvas.id = "MyCanvas";

document.getElementById("Table1").appendChild(canvas);

var myCanvas = document.getElementById("MyCanvas");
var myCanvasContext = myCanvas.getContext("2d");

myCanvas.width = 500;
myCanvas.height = 500;

var img = new Image();

img.onload = function(){
    myCanvasContext.drawImage(img,0,0);
}

img.src = "http://underthebridge.co.uk/wp-content/uploads/2014/03/Example-main-image1.jpg";
var toURL = myCanvas.toDataURL();
console.log(toURL);

var img2 = document.createElement("img");
img2.id = "MyImg";
img2.src = toURL;
document.getElementById("Table1").appendChild(img2);

<div id='Table1'> </div>

You can't put an base64 inside a canvas but only in a tag img.

edited Feb 6, 2019 at 14:51

answered Feb 6, 2019 at 14:32

Kolzar

8811 gold badge13 silver badges25 bronze badges

1 Comment

sundowatch Over a year ago

It's because, I gave an example of my situation. It's a URL of an existing image

Collectives™ on Stack Overflow

Draw Image to Canvas and encode it via base64

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related