裁剪 JS 库在 Election 中不起作用答案

【问题标题】：Cropping JS libraries do not work in Election裁剪 JS 库在 Election 中不起作用
【发布时间】：2021-04-10 02:22:20
【问题描述】：

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

我尝试了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 中无法正常工作，但我不知道这里到底发生了什么。任何帮助将不胜感激解释它并使其发挥作用。

【问题讨论】：

我猜这些库的 CSS 存在问题。您可以尝试手动查找库的 CSS 文件并查看是否可行。

标签： electron cropperjs react-image-crop

【解决方案1】：

@kyleawayan 是对的。

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

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

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

到我的 HTML 的 <head>。

【讨论】：