react cropper图片裁切实例详解

时间:2022-11-19 小小的梦想人气:0

摘要

在最近的业务工作中，需要提供一个上传图片前先剪切图片的功能。有了这个业务需求，我就在寻找一些可以帮助我完成业务的库。那么我推荐两个库。一个是基础版本的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来进行封装。我主要是完成公司的业务，拿到一个较高的绩效。

加载全部内容