裁剪JS库在选举中不起作用
裁剪JS库在选举中不起作用
提问于 2021-04-10 10:22:21
我正在尝试添加一个简单的图像裁剪功能在我的电子应用程序。我想要像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中工作，但我不知道这里到底发生了什么。如有任何帮助，请对其进行解释并使其正常工作。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-08-12 06:37:25
@kyleawayan是对的。
您只需手动将CSS文件包含到HTML中即可。
我在Electron中使用的是一个index.html文件，所以我不得不添加：
<link rel="stylesheet" href="./node_modules/cropperjs/dist/cropper.min.css" />到我的超文本标记语言的<head>。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67030246
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号