Image 如何在画布中显示标记的内容？

页面有一个标记和一个canvas元素。 内部的图像将被裁剪，并使用放大镜进行操作。 如何在画布中显示图像的裁剪内容。

假设您有一个id为image的标记。可以使用getElementById方法获取图像引用。如下所示：

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

var canvas=document.getElementById'canvas'//对canvas元素的引用 var ctx=canvas.getContext'2d'；//获取画布上下文； ctx.drawImageimg，0,0//将图像绘制到画布中；

---

您最好使用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;
}

---

图像不会是跨原点的。如果它是从其他站点获取的，则无法获取它

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