0

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

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

4

1 回答 1

1

@kyleawayan是对的。

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

我正在使用index.html带有 Electron 的文件,所以我必须添加:

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

<head>我的 HTML。

于 2021-08-12T06:37:24.637 回答