从 url 加载图像并绘制到 HTML5 Canvas

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

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>

Answer 2

就这么简单...

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

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

从 url 加载图像并绘制到 HTML5 Canvas

Load image from url and draw to HTML5 Canvas

html

javascript

canvas

image

html5-canvas

工作示例：