react cropper图片裁切实例详解
更新时间：2022年11月16日 11:03:55 作者：小小的梦想
这篇文章主要为大家介绍了react cropper图片裁切实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
摘要
在最近的业务工作中，需要提供一个上传图片前先剪切图片的功能。有了这个业务需求，我就在寻找一些可以帮助我完成业务的库。那么我推荐两个库。一个是基础版本的react-cropper另一个是被别人封装过的。react-cropper-pro。可以根据自己的情况所需选择自己需要的库。在这里我主要说说react-cropper这个库，那么如果想要了解这个react-cropper-pro这个库的同学可以看看，该库作者的介绍，说的很详细。React-cropper-pro
简介
那么react-cropper这个库到底能干什么呢？
1.点击Demo查看demo
2.github地址
安装
npm install --save react-cropper
使用
直接粘贴代码就可以实现图片效果。
import React, { useRef } from "react";
import Cropper from "react-cropper";
import "cropperjs/dist/cropper.css";
function App() {
const cropperRef = useRef(null);
const onCrop = () => {
const imageElement = cropperRef?.current;
const cropper = imageElement?.cropper;
// 如果感觉卡顿，请注释下面这一行
console.log(cropper.getCroppedCanvas().toDataURL());
};
return (
<Cropper
src="https://raw.githubusercontent.com/roadmanfong/react-cropper/master/example/img/child.jpg"
style={{ height: 400, width: "100%" }}
// Cropper.js options
initialAspectRatio={16 / 9}
guides={false}
crop={onCrop}
ref={cropperRef}
/>
);
}
export default App;
他会根据你的鼠标拖动，自动当裁切区域内的图片转换为base64格式的图片。如果你觉得会又明显的卡顿，是因为他监听的是裁切框移动事件，只要裁切框移动就会触发。这样是不利于用户体验的，可以通过防抖、节流的方式来控制他，让他达到一个比较好的体验效果。它里面有很多的属性。具体学习的同学可以去看看源码。毕竟业务为主。
总结
这就是一个比较好用的裁切库，当然你也可以直接是直接使用cropperjs来进行封装。我主要是完成公司的业务，拿到一个较高的绩效。
以上就是react cropper图片裁切实例详解的详细内容，更多关于react cropper图片裁切的资料请关注脚本之家其它相关文章！
相关文章
React+echarts (echarts-for-react) 实现中国地图及省份切换功能
这篇文章主要介绍了React+echarts (echarts-for-react) 画中国地图及省份切换,有足够的地图数据，可以点击到街道，示例我只出到市级，本文结合实例代码给大家介绍的非常详细需要的朋友可以参考下2022-11-11
在Create React App中使用CSS Modules的方法示例
本文介绍了如何在 Create React App 脚手架中使用 CSS Modules 的两种方式。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。2019-01-01
React是一个流行的JavaScript库,用于构建现代前端应用程序,本文将深入探讨如何在React中生成和导出Word文档,感兴趣的小伙伴可以学习一下2023-09-09
这篇文章主要为大家介绍了create-react-app开发常用配置教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
React Native中NavigatorIOS组件的简单使用详解
这篇文章主要介绍了React Native中NavigatorIOS组件的简单使用详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了react实现Radio组件的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了记录一次完整的react hooks实践，通过一个简单示例，介绍了react hooks，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-03-03
这篇文章主要介绍了使用React.forwardRef传递泛型参数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了在react项目中webpack使用mock数据的操作方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-06-06
这篇文章主要介绍了一百多行代码实现react拖拽hooks，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
最新评论