通过 react-image-crop 模块获取裁剪图像

Posted 2023-02-25

【中文标题】通过 react-image-crop 模块获取裁剪图像

【英文标题】：Get cropped image via react-image-crop module

【发布时间】：2018-09-11 10:28:55

【问题描述】：

您能帮我如何通过 react-image-crop 模块获取输出（裁剪图像的来源）吗？ 上传组件如下所示：

class MyUpload extends Component 
constructor() 
    super();
    this.state = 
        src: 'source-to-image',
        crop: 
            x: 10,
            y: 10,
            aspect: 9 / 16,
            width: 100
        
    


onCropComplete = (crop, pixelCrop) => 
    this.setState(
        crop
    )
;

render() 
    return (
           <ReactCrop
                    src=this.state.src
                    onComplete=this.onCropComplete
                />
    );
 

方法 onCropComplete 只返回裁剪图像的坐标、宽度和高度，而不是源。我想获取 blob 文件。

---

编辑（工作解决方案——感谢 Mosè Raguzzini 的回复）：

如果有人遇到类似问题，请在组件的教程中调用 getCropptedImg 函数，并从返回的 Blob 对象创建 url，如下所示：

getCroppedImg(this.state.image, pixelCrop, 'preview.jpg')
            .then((res) => 
                const blobUrl = URL.createObjectURL(res);
                console.log(blobUrl); // it returns cropped image in this shape of url: "blob:http://something..."
            )

【问题讨论】：

这里是一个例子codesandbox.io/s/72py4jlll6?file=/src/index.js

【参考方案1】：

react-image-crop 不是用来生成 blob，只是用来裁剪图像。可能你需要类似https://foliotek.github.io/Croppie/

更新： 检查“如何在客户端显示作物？”部分在底部 https://www.npmjs.com/package/react-image-crop，blob 可作为隐藏功能使用

/**
 * @param File image - Image File Object
 * @param Object pixelCrop - pixelCrop Object provided by react-image-crop
 * @param String fileName - Name of the returned file in Promise
 */
function getCroppedImg(image, pixelCrop, fileName) 
 
  const canvas = document.createElement('canvas');
  canvas.width = pixelCrop.width;
  canvas.height = pixelCrop.height;
  const ctx = canvas.getContext('2d');
 
  ctx.drawImage(
    image,
    pixelCrop.x,
    pixelCrop.y,
    pixelCrop.width,
    pixelCrop.height,
    0,
    0,
    pixelCrop.width,
    pixelCrop.height
  );
 
  // As Base64 string
  // const base64Image = canvas.toDataURL('image/jpeg');
 
  // As a blob
  return new Promise((resolve, reject) => 
    canvas.toBlob(file => 
      file.name = fileName;
      resolve(file);
    , 'image/jpeg');
  );

 
async test() 
  const croppedImg = await getCroppedImg(image, pixelCrop, returnedFileName);

【讨论】：

谢谢。我不得不忽略它。