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图片裁切的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家介绍了比ant更丰富Modal组件功能实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了在react中使用tailwind的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
React antd中setFieldsValu的简便使用示例代码
form.setFieldsValue是antd Form组件中的一个方法,用于动态设置表单字段的值,它接受一个对象作为参数,对象的键是表单字段的名称,值是要设置的字段值,这篇文章主要介绍了React antd中setFieldsValu的简便使用,需要的朋友可以参考下2023-08-08
这篇文章主要为大家介绍了React并发更新与性能优化解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
React-Native中禁用Navigator手势返回的示例代码
本篇文章主要介绍了React-Native中禁用Navigator手势返回的示例代码，具有一定的参考价值，有兴趣的可以了解一下2017-09-09
本篇文章主要介绍了react redux入门示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了React的组件协同使用,文中给大家提到在React开发中，有哪些场景的组件协同？又如何去实现组件的协同使用呢？本文都给大家提到，感兴趣的朋友跟随小编一起看看吧2021-09-09
React中的Refs提供了一种方式，允许我们访问DOM节点或在render方法中创建的React元素，本文给大家介绍react refs的相关知识，感兴趣的朋友一起看看吧2021-07-07
这篇文章主要介绍了react中的渲染机制以及相关的优化方案，内容包括react渲染步骤、concurrent机制以及产生作用的机会，简单模拟实现 concurrent mode，基于作业调度优先级的思路进行项目优化的两个hooks，感兴趣的小伙伴跟着小编一起来看看吧2023-07-07
这篇文章主要介绍了作为老司机使用 React 总结的 11 个经验教训,需要的朋友可以参考下2017-04-04
最新评论