将画布元素分配给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，该数据URI包含由type参数指定的格式的图像表示（默认为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"/>