我正在尝试在我的 Electron 应用程序中添加一个简单的图像裁剪功能。我想要这样的东西。
我试过react-image-crop和react-cropper,但都没有工作。
使用后一个库,我只是做了:
import React, { useState } from 'react';
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';
const ImageCrop = () => {
const [upImg, setUpImg] = useState();
const onSelectFile = e => {
if (e.target.files && e.target.files.length > 0) {
const reader = new FileReader();
reader.addEventListener('load', () => setUpImg(reader.result));
reader.readAsDataURL(e.target.files[0]);
}
};
return (
<>
<div>
<input type="file" accept="image/*" onChange={onSelectFile} />
</div>
<Cropper src={upImg} />
</>
);
};
export default ImageCrop;
结果如下所示,我无法选择该区域。
使用以前的库,它只在图像周围显示一个橙色框,并且不允许裁剪它。
我想某些 JS 功能在 Electron 中无法正常工作,但我不知道这里到底发生了什么。任何帮助将不胜感激解释它并使其工作。