如何在react-cropper中设置基于原图尺寸的最小裁剪分辨率

Hey there! Let's figure out how to set a minimum crop size based on your image's actual pixel dimensions (not the scaled-down version displayed in the viewport) using react-cropper.

The key here is that react-cropper's built-in minCropBoxWidth and minCropBoxHeight props work with the displayed image size, not the original. So we need to do a little math to translate your desired original-based min size into the scaled display size the cropper uses.

Step-by-Step Solution #

• Grab original image dimensions: First, we need to get the real width and height of your image (before any scaling in the cropper).
• Calculate desired min crop size: Decide what percentage or fixed pixel size you want the minimum crop to be (based on the original image).
• Convert to display-scaled size: Use the cropper's image data to find the scaling ratio between the original image and its displayed size, then apply that ratio to your original-based min size.
• Set min crop dimensions: Apply the converted values to the cropper instance.

Modified Component Code #

Here's how to update your existing code to implement this:

import React from 'react';
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';

class YourImageCropper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      imageSrc: '',
      originalWidth: 0,
      originalHeight: 0,
      minCropWidth: 0, // 基于原图的最小宽度
      minCropHeight: 0 // 基于原图的最小高度
    };
  }

  // 将原图尺寸转换为裁剪器内的显示尺寸
  getDisplaySize = (originalSize) => {
    const cropperInstance = this.refs.cropper?.cropper;
    if (!cropperInstance) return 0;
    
    const imageData = cropperInstance.getImageData();
    // 计算显示尺寸与原图尺寸的比例
    const scaleRatio = imageData.width / imageData.naturalWidth;
    return originalSize * scaleRatio;
  };

  componentDidUpdate(prevProps, prevState) {
    // 仅当图片源变化时执行
    if (this.state.imageSrc !== prevState.imageSrc && this.state.imageSrc) {
      const img = new Image();
      img.src = this.state.imageSrc;
      
      img.onload = () => {
        // 获取图片真实尺寸
        const originalWidth = img.naturalWidth;
        const originalHeight = img.naturalHeight;
        
        // 自定义最小裁剪尺寸（可根据需求调整）
        // 示例：最小裁剪区域为原图的25%
        const minCropWidth = originalWidth * 0.25;
        const minCropHeight = originalHeight * 0.25;
        
        // 如果要强制遵循16:9的比例，可替换为：
        // const minCropHeight = minCropWidth * 9 / 16;
        
        this.setState({ originalWidth, originalHeight, minCropWidth, minCropHeight }, () => {
          const cropperInstance = this.refs.cropper?.cropper;
          if (cropperInstance) {
            // 设置裁剪器的最小宽高（转换为显示尺寸）
            cropperInstance.setMinCropBoxWidth(this.getDisplaySize(minCropWidth));
            cropperInstance.setMinCropBoxHeight(this.getDisplaySize(minCropHeight));
          }
        });
      };
    }
  }

  render() {
    return (
      <Cropper
        style={{ height: 422, width: "90%", margin: "0 auto", marginTop: 25 }}
        preview=".img-preview"
        guides={false}
        aspectRatio={16 / 9}
        src={this.state.imageSrc}
        ref="cropper"
        viewMode={1}
        className={classes.CropperCustomize}
        zoomable={false}
      />
    );
  }
}

export default YourImageCropper;

Key Explanations #

• naturalWidth/naturalHeight: 这两个属性能获取图片的真实像素尺寸，不受浏览器或裁剪器的缩放影响。
• 比例计算: 通过getImageData()获取图片在裁剪器中的显示尺寸，计算出缩放比例，从而将基于原图的最小尺寸转换为裁剪器能识别的显示尺寸。
• setMinCropBoxWidth/setMinCropBoxHeight: 这两个裁剪器实例方法允许我们在获取到正确的缩放尺寸后，动态设置最小裁剪区域大小。

这个设置能确保裁剪框不能被调整到你定义的最小尺寸以下，而且这个最小尺寸是基于图片的真实大小，而非屏幕上的显示大小。

内容的提问来源于stack exchange，提问作者PCK