从URL加载图像并绘制到HTML5画布

Question

我在JavaScript中从URL加载图像时遇到了问题。下面的代码可以工作，但我不想从HTML中加载图像。我想使用纯JavaScript从一个URL加载图像。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("imImageId");
ctx.drawImage(img, 0, 0);

- J8m

Answer 1

简单，只需在JavaScript中创建一个图像对象，设置src，并等待加载事件后再进行绘制。

工作示例：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
};
img.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png';

<canvas id="myCanvas"></canvas>

- Alexander O'Mara

---

更倾向于使用img.addEventListener("load", () => ctx.drawImage(img, 0, 0))而不是设置onload。 - Sebastian Simon

@SebastianSimon 你能解释一下为什么吗？ - holydragon

对于DOM中的元素来说，它可以更灵活一些，但如果不在DOM中（就像这里的情况），onload就可以了。 - Alexander O'Mara

在一般情况下，addEventListener比on*属性更可取。这里的一个可能优势是您不必担心意外覆盖先前的load事件处理程序。on*属性来自传统的DOM 0事件模型；它们仍然被用于较新的事件类型，并且可以用于特性检测。然而，对于常规事件绑定，目前的标准化工作主要集中在addEventListener上。从某种意义上说，它更加“标准”。 - Sebastian Simon

Answer 2

简单至此...

var img=new Image();
img.onload=start;
img.src="myImage.png";
function start(){
    ctx.drawImage(img,0,0);
}

- markE

Answer 3

如果您想使用 Promise 版本而不是 onload 方法：

async function drawImage(url, ctx) {
  let img = new Image();
  await new Promise(r => img.onload=r, img.src=url);
  ctx.drawImage(img, 0, 0);
}

let ctx = document.querySelector("#myCanvas").getContext("2d");
await drawImage("https://example.com/image.png", ctx);

- joe