快捷導(dǎo)航

react?cropper圖片裁切實(shí)例詳解

更新時(shí)間：2022年11月16日 11:03:55 作者：小小的夢(mèng)想

這篇文章主要為大家介紹了react?cropper圖片裁切實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

摘要

在最近的業(yè)務(wù)工作中，需要提供一個(gè)上傳圖片前先剪切圖片的功能。有了這個(gè)業(yè)務(wù)需求，我就在尋找一些可以幫助我完成業(yè)務(wù)的庫(kù)。那么我推薦兩個(gè)庫(kù)。一個(gè)是基礎(chǔ)版本的react-cropper另一個(gè)是被別人封裝過(guò)的。react-cropper-pro?？梢愿鶕?jù)自己的情況所需選擇自己需要的庫(kù)。在這里我主要說(shuō)說(shuō)react-cropper這個(gè)庫(kù)，那么如果想要了解這個(gè)react-cropper-pro這個(gè)庫(kù)的同學(xué)可以看看，該庫(kù)作者的介紹，說(shuō)的很詳細(xì)。React-cropper-pro

簡(jiǎn)介

那么react-cropper這個(gè)庫(kù)到底能干什么呢？

1.點(diǎn)擊Demo查看demo

2.github地址

安裝

npm install --save react-cropper

使用

直接粘貼代碼就可以實(shí)現(xiàn)圖片效果。

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;
    // 如果感覺(jué)卡頓，請(qǐng)注釋下面這一行
    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;

他會(huì)根據(jù)你的鼠標(biāo)拖動(dòng)，自動(dòng)當(dāng)裁切區(qū)域內(nèi)的圖片轉(zhuǎn)換為base64格式的圖片。如果你覺(jué)得會(huì)又明顯的卡頓，是因?yàn)樗O(jiān)聽(tīng)的是裁切框移動(dòng)事件，只要裁切框移動(dòng)就會(huì)觸發(fā)。這樣是不利于用戶體驗(yàn)的，可以通過(guò)防抖、節(jié)流的方式來(lái)控制他，讓他達(dá)到一個(gè)比較好的體驗(yàn)效果。它里面有很多的屬性。具體學(xué)習(xí)的同學(xué)可以去看看源碼。畢竟業(yè)務(wù)為主。