从 url 加载图像并绘制到 HTML5 Canvas [英] Load image from url and draw to HTML5 Canvas

问题描述

我在从 javascript 中的 url 加载图像时遇到问题.下面的代码有效，但我不想从 html 加载图像.我想使用纯 javascript 从 url 加载图像.

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>

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