Question

该页面包含<img>标记和canvas元素。 <img>内的图像被裁剪并使用放大镜进行操作。如何在画布内显示图像的裁剪内容。

Answer 1

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

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

然后使用HTML5 drawImage方法，您可以将图像内容绘制到画布中。代码应如下所示：

var canvas = document.getElementById('canvas') // reference to canvas element
var ctx = canvas.getContext('2d'); // get the canvas context;
ctx.drawImage(img, 0, 0); //draw image into canvas;

Answer 2

你最好用这个（在easimov的原始答案之上），等待图像首先加载。如果图像未加载，则不会在画布上绘制。它假定img是您的图像标记：

var canvas = document.getElementById('canvas') // reference to canvas element
var ctx = canvas.getContext('2d'); // get the canvas context;

img.onload = function ()
{
    ctx.drawImage(img, 0, 0); //draw image into canvas;
}

如何在画布中显示<img/>标签的内容？

2 个答案: