裁剪 JS 库在选举中不起作用

Question

我正在尝试在我的 Electron 应用程序中添加一个简单的图像裁剪功能。我想要 this.

这样的东西

我试过react-image-crop and 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;

结果如下所示，我无法select该区域。

对于以前的库，它只在图像周围显示一个橙色框，并且不允许裁剪它。

我想有些 JS 功能在 Electron 中无法正常工作，但我不知道这里到底发生了什么。任何帮助解释它并使其工作将不胜感激。

Answer 1

是对的。

您只需手动将 CSS 文件包含到您的 HTML。

我在 Electron 中使用 index.html 文件，所以我必须添加：

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

我的 HTML 的 <head>。

裁剪 JS 库在选举中不起作用

Cropping JS libraries do not work in Election

electron

cropperjs

react-image-crop