浏览器调整大小后 CropperJS 不正确缩放 canvas

Question

我正在使用 ReactCropper 使用 CropperJs。我正在使用裁剪和旋转功能。我遇到了响应功能的问题。当将浏览器大小调整为更小然后再调整为更大尺寸时，图像变得太大（如缩放比例很大）。这是上传的图片，如您所见，它没有居中，但主要问题不在于此。

此处调整浏览器大小

再次将浏览器 window 变大后，图像会移动和缩放。

我正在使用这样的选项来配置 Cropper：

            <Cropper
                    ref='cropper'
                    src={image}
                    style={{height: '100%', width: '100%'}}
                    background={false}
                    viewMode={1}
                    zoomOnTouch={false}
                    zoomOnWheel={false}
                    aspectRatio={1}
                    guides={false}
                    restore={true}
                />

当我删除 viewMode={1} 时，没有缩放或移动问题，但裁剪框在所有容器上移动（我不需要这样的裁剪框行为，我需要它在图像内部移动） .

有什么想法吗？

感谢您的帮助

Answer 1

所以，

目前，我找到了手动更新图片大小和位置的解决方案

1)裁剪器配置：

 <Cropper
                    ref='cropper'
                    src={image}
                    style={{height: '100%', width: '100%'}}
                    viewMode={1}
                    background={false}
                    aspectRatio={1}
                    guides={false}
                    dragMode="none"
                    movable={false}
                    zoomable={false}
                    minCanvasWidth={320}
                    minCanvasHeight={320}
                    minCropBoxWidth={160}
                    minCropBoxHeight={160}
                    checkOrientation={true}
                    restore={true}
                    autoCropArea={0.5}
                />

2) 将侦听器绑定到 window 调整大小事件并执行更新 canvas 大小和居中图像的操作。我需要更新 canvas 大小，因为在我的情况下图像应该小于 window 大小。

此处正在更新 canvas 尺寸：

    updateCanvasSize() {
    let koef = 0.9, // how smaller than window viewport image should be
        container = this.refs.cropper.getContainerData(),
        allowedSize = Math.min(container.width, container.height) * koef,
        image = this.refs.cropper.getImageData(),
        imgW = Math.round(image.width),
        imgH = Math.round(image.height),
        originalW = Math.round(image.naturalWidth),
        originalH = Math.round(image.naturalHeight),
        newH, newW, scale = 1;

    if (Math.abs((this.degrees / 90) % 2) > 0) { //if image was rotated
        let t = imgW;
        imgW = imgH;
        imgH = t;
    }

    if (allowedSize < imgH || imgW > allowedSize) {
        if (imgW > imgH) {
            scale = allowedSize / imgW;
            if (imgH * scale > allowedSize) {
                scale = allowedSize / imgH;
            }
        }
        else {
            scale = allowedSize / imgH;
            if (imgW * scale > allowedSize) {
                scale = allowedSize / imgW;
            }
        }
    }

    newW = Math.round(scale * imgW);
    newH = Math.round(scale * imgH);

/* this part is needed if you want to keep size of small images */
        if (Math.abs((this.degrees / 90) % 2) > 0) {
            if (newW >= originalH && newH >= originalW) {
                newW = originalH;
                newH = originalW;
            }
        } else {
            if (newW >= originalW && newH >= originalH) {
                newW = originalW;
                newH = originalH;
            }
        }
/* end */

    this.refs.cropper.setCanvasData({
        width: newW,
        height: newH
    });
}

和window内的居中：

 centerImage() {
        let container = this.refs.cropper.getContainerData(),
            canvas = this.refs.cropper.getCanvasData(),
            height = canvas.height,
            width = canvas.width;

        let top = Math.abs((container.height - height) / 2),
            left = Math.abs((container.width - width) / 2);

        this.refs.cropper.setCanvasData({
            top,
            left
        });
    }

此外，我在图像旋转后使用此更新。

希望，有帮助

浏览器调整大小后 CropperJS 不正确缩放 canvas

CropperJS incorrect scaling canvas after browser resize

javascript

image

crop

reactjs