如何绘制现有<img>以帆布

Question

我知道我可以做到这一点使用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'> 

为什么我想做这个？我想用的PageSpeed

Answer 1

非常首款谷歌打你的问题是有希望的：

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

见w3Schools

Answer 2

假设你有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 
} 

Answer 3

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

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

然后使用上面的代码。

Answer 4

，您可以给图片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"> 

Answer 5

尝试

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