Search code examples
electroncropperjsreact-image-crop

Cropping JS libraries do not work in Election

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. enter image description here

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.

Solution

  • @kyleawayan is right.

    You just have to manually include the CSS file into your HTML.

    I was using an index.html file with Electron, so I had to add:

    <link rel="stylesheet" href="./node_modules/cropperjs/dist/cropper.min.css" />

    to the <head> of my HTML.