Question

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

此处调整浏览器大小

再次使浏览器窗口变大后，图像会移动并缩放。

我正在使用配置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}时，没有缩放或移位问题但是裁剪框正在移动所有容器（我不需要这样的裁剪框行为，我需要它在图像内部移动）。< / p>

任何想法是什么问题？

感谢您的帮助

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）将监听器绑定到窗口大小调整事件并执行更新画布大小和居中图像的操作。我需要更新画布大小，因为在我的情况下，图像应该小于窗口大小。

这是更新画布大小：

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

窗口内的中心：

 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缩放画布不正确

1 个答案: