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

裁剪缩小图像

1 个答案: