Javascript 裁剪缩小的图像

我不确定如何描述这个问题，所以让我用一个例子来解释它

• 假设我有一个宽度和高度为600x400的画布设置

• 现在，我可以选择一个图像（可以是任何尺寸，但通常大于600x400）并在画布上绘制

• 现在我需要裁剪原始图像（假设在本例中是1000x500像素）以 400x200像素

在画布上显示缩小的图像时，如何确保剪切原始大小的图像

我最好考虑一个完全的客户端解决方案。

其实很简单。您只需将图像绘制到所需大小的画布上，然后在画布上调用

toDataUrl（）

，以获取结果图像数据。只要将原始图像的内容绘制到裁剪区域，则将图像本身绘制到其他画布不会影响输出

var canvas = document.getElementsByTagName("canvas")[0],
    context = canvas.getContext("2d"),
    img = document.getElementsByTagName("img")[0];

canvas.width = 600;
canvas.height = 400;

context.drawImage(img, 0,0,600,400);

var croppedCanvas = document.getElementById("tempCanvas"),
    croppedCtx = croppedCanvas.getContext("2d");

croppedCanvas.width = 400;
croppedCanvas.height = 200;

croppedCtx.drawImage(img, 0, 0);

---

行得通，谢谢。顺便说一句，它不应该被裁剪ctx.canvas.width=400；croppedCtx.canvas.height=200@红绿蓝哈捕捉得好，我工作得太快了，我猜：P