I am trying to add a simple image cropping functionality in my Electron app. I want something like this.
I have tried react-image-crop and react-cropper, but both did not work.
With the latter library, I simply did:
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;
The result looks like the following and I was not able to select the area.
With the former library, it only displays an orange frame around the image and does not allow cropping it.
I imagine some JS functionality is somehow not working in Electron, but I do not know what exactly is going on here. Any help would be appreciated to explain it and make it work.
@kyleawayan is right.
You just have to manually include the CSS file into your HTML.
I was using an
index.htmlfile with Electron, so I had to add:to the
<head>of my HTML.