如何绘制现有<img>到画布

How to draw existing <img> to canvas

本文关键字：lt img gt 何绘制 绘制      更新时间：2023-09-26

我知道我可以使用javascript:来完成这项工作

var ctx = getCanvas('testCanvas').getContext('2d'); // get Canvas context
var img = new Image();
img.src = 'test.png';
img.onload = function(){
    ctx.drawImage(img, 200, 200); // x, y, width, height
}

但是如何将现有标签绘制到画布上：

在html:中

<img src='test.png'>

我为什么要这么做？我想使用页面速度优化图像加载

你的问题在谷歌上的第一个点击很有希望：

var c=document.getElementById("testCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("existingHTMLImageElementId");
ctx.drawImage(img,10,10);

请参阅w3Schools

尝试

var canvas=document.getElementById("test");
var ctx=canvas.getContext("2d");
var img=document.getElementById("imgID");
ctx.drawImage(img,10,10);

假设您的id为#image，则可以使用

var img = document.getElementById("image");
var ctx = getCanvas('testCanvas').getContext('2d'); // get Canvas context
img.onload = function(){
    ctx.drawImage(img, 200, 200); // x, y, width, height
}

假设您有一个id为image的<img>标记。您可以使用getElementById方法获取图像引用。类似以下内容：

var img = document.getElementById("image");

然后使用上面的代码。

您可以将图像src赋予新的图像

var ctx = getCanvas('testCanvas').getContext('2d'); // get Canvas context
var img = new Image();
img.src = document.getElementById('testImage').src;
img.onload = function(){
    ctx.drawImage(img, 200, 200); // x, y, width, height
}

将id添加到您的图像元素

<img src='test.png' id="testImage">
相关文章：