Question

我目前正在尝试制作图片上传工具，您可以在将图片上传为个人资料图片之前裁剪图片。裁剪框可以调整大小，并且框内边界内的任何内容都会在网页上的单独画布中显示为预览。目前，我有以下代码，它将第一个画布上的裁剪器区域（上下文）放在第二个画布上（previewContext）。

function previewCroppedImage() {
    var max_height = 100;
    var max_width = 100;
    var height = cropper.height;
    var width = cropper.width;
    var scale = Math.min(max_height/height, max_width/width)

    if (scale < 1) {
        height *= scale;
        width *= scale;
    }

    previewCropCanvas.width = width;
    previewCropCanvas.height = height;
    imgData = context.getImageData(cropper.x, cropper.y, width, height);
    previewContext.putImageData(imgData, 0, 0);

}

使用其他问题，我已创建此代码。但是，当该框大于100像素时，此代码仅占用裁剪框左上角的100px X 100px区域。相反，我希望它缩小它在裁剪框中找到的图像数据，为100 x 100px。我已经在下面的图片中显示了该工具目前的样子。

crop tool not working

Answer 1

尝试使用像这样的canvas ctx.scale函数。

ScaleHeight=maxHeight/height;
ScaleWidth=maxWidth/width;

然后，在将图片复制到新画布之前或者在新画布中将图片复制到新画布之后，您可以运行

ctx.scale(ScaleWidth,ScaleHeight);

ctx是canvas元素的上下文可以找到on the w3schools site

的文档

如何缩放在画布上调整图像的大小

1 个答案: