javascript - 裁剪缩小图像

Question

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

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

• 现在，我可以选择一个图像(可以是任何尺寸，但通常大于 600x400)并将其绘制在 Canvas 上。

• 现在我需要将原始图像(假设在本例中为 1000x500 像素)裁剪为 400x200 像素。

如何执行此操作以确保在 Canvas 上显示缩小图像时裁剪原始大小的图像？

我更喜欢寻找完全客户端的解决方案。

Answer 1

<强> Live Demo

其实很简单。您所需要做的就是将图像绘制到所需大小的 Canvas 上，然后在其上调用 toDataUrl() 来获取结果图像数据。只要将原始图像的内容绘制到裁剪区域，将图像本身绘制到不同的 Canvas 就根本不会影响输出。

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