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结合bootstrap实现评论功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
本篇文章主要介绍了浅谈react受控组件与非受控组件(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这篇文章主要为大家介绍了react数据管理机制React.Context源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
React Hooks useReducer 逃避deps组件渲染次数增加陷阱
这篇文章主要介绍了React Hooks 之 useReducer 逃避deps后增加组件渲染次数的陷阱详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了React 全面解析excel文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
解决React报错Property value does not exist&n
这篇文章主要为大家介绍了React报错Property value does not exist on type HTMLElement解决方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了react路由动画跳转功能,大概思路是下载第三方库 引用,创建css文件引用,想要实现跳转动画功能,就在那个组件的根节点绑定classname属性即可,在跳转的时候即可实现,需要的朋友可以参考下2023-10-10
这篇文章主要为大家介绍了解决jest处理es模块示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了react实现数据监听方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家详细介绍了React的事件处理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
最新评论