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（）方法以type参数指定的格式（默认为PNG）返回包含图像表示形式的数据URI。返回的图像分辨率为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"/>

将画布元素分配给img.src

1 个答案: