从网址加载图片并绘制到HTML5画布 [英] Load image from url and draw to HTML5 Canvas

问题描述

我无法从JavaScript中的网址载入图片。下面的代码工作，但我不想有从html加载的图像。我想使用纯JavaScript从网址加载图片。

I am having trouble loading an image from a url in javascript. The code below works, but I don't want to have to have the image loaded from html. I want to load the image from a url using pure javascript.

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

推荐答案

简单，只需在JavaScript中创建一个图像对象 src ，并等待绘制之前的加载事件。

Simple, just create an image object in JavaScript, set the src, and wait for the load event before drawing.

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>

这篇关于从网址加载图片并绘制到HTML5画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！