react cropper图片裁切实例详解
作者：小小的梦想
这篇文章主要为大家介绍了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图片裁切的资料请关注脚本之家其它相关文章！