Нарисуйте изображение на холст и закодируйте его через base64

Question

Я пытаюсь нарисовать существующее изображение на холсте и закодировать его с помощью base64.Вот мой код:

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);

Он рисует изображение на холсте, но toURL - это пустой код base64 изображения размером 135x170.Я пытался декодировать его, но он всегда показывает пустое изображение.

Я не могу найти, в чем проблема с ним.

Answer 1

Проблема в том, что myCanvas.toDataURL(); вызывается до фактической загрузки изображения.Для этого вам нужно переместить его в onload -бэкбэк, например:

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";

---

Ниже приведен упрощенный пример:

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

Answer 2

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>

Вы не можете поместить base64 внутри холста, но только в тег img.