image - 如何在画布内显示标签的内容？

Question

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

Answer 1

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

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

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

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;
}