Назначьте элемент canvas для img.src

Question

Это работает

img.src = "assets/img.png";
img.addEventListener('load', function () {
   textureContext.drawImage(this, 0, 0);
   texture.update();
});

Теперь, как можно использовать элемент canvas, который уже находится на странице, в этом фрагменте кода. Как-то так.

var img = document.getElementById("canvas1");
textureContext.drawImage(img, 0, 0);
texture.update();

Я ищу чистое решение для JavaScript.

Answer 1

Вам необходимо использовать метод Canvas # toDataURL метод

Метод HTMLCanvasElement.toDataURL () возвращает URI данных, содержащий представление изображения в формате, заданном параметромпараметр типа (по умолчанию PNG).Возвращенное изображение имеет разрешение 96 dpi.

img.src = document.getElementById("canvas1").toDataURL();

Рабочий пример:

const canvas = document.getElementById("canvas");
const img_from_canvas = document.getElementById("img_from_canvas");

const context = canvas.getContext("2d");
context.rect(10, 10, 150, 100);
context.fill();
img_from_canvas.src = canvas.toDataURL();

<p>canvas</p>
<canvas id="canvas"></canvas>
<p>image from canvas</p>
<img id="img_from_canvas"/>