reactjs - 通过 react-image-crop 模块获取裁剪图像
问题描述
你能帮我如何通过 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..."
})
解决方案
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);
}
推荐阅读
- c++ - 我无法在 Cygwin 中使用 Visual Studio 中的 cpp 文件
- flutter - 在 Flutter 中使用 OneSignal
- ruby-on-rails - 使用 Ruby on Rails 进行命名空间布局渲染
- java - 在 elasticsearch 上安装我的插件时杰克逊 jar 地狱
- r - 从并行化的 for 循环返回结果
- reactjs - React Native Axios get 方法 undefined 不是对象
- python-3.x - 在对值进行排序时保留字典的键
- c++ - 移植:opencv 2.4.3 -> opencv 3.1.,未在此范围内声明 cvGetMat
- algorithm - KD树和Brute-force比较搜索时间
- java - 在java中映射对象的接口类型