javascript - 裁剪缩小的图像

Question

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

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

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

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

我该如何做才能确保在画布上显示按比例缩小的图像时裁剪原始大小的图像？

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

Answer 1

现场演示

它实际上很容易。您需要做的就是将图像绘制到所需大小的画布上，然后调用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);