亲宝软件园·资讯

展开

react cropper图片裁切实例详解

小小的梦想 人气: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来进行封装。我主要是完成公司的业务,拿到一个较高的绩效。

加载全部内容

相关教程
猜你喜欢
用户评论