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

Question

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

\n\n

class MyUpload extends Component {\nconstructor() {\n    super();\n    this.state = {\n        src: \'source-to-image\',\n        crop: {\n            x: 10,\n            y: 10,\n            aspect: 9 / 16,\n            width: 100\n        }\n    }\n}\n\nonCropComplete = (crop, pixelCrop) => {\n    this.setState({\n        crop\n    })\n};\n\nrender() {\n    return (\n           <ReactCrop\n                    src={this.state.src}\n                    onComplete={this.onCropComplete}\n                />\n    );\n} }\n

\n\n

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

\n\n

---

\n\n

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

\n\n

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

\n\n

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

\n

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