react?cropper圖片裁切實(shí)例詳解
摘要
在最近的業(yè)務(wù)工作中，需要提供一個上傳圖片前先剪切圖片的功能。有了這個業(yè)務(wù)需求，我就在尋找一些可以幫助我完成業(yè)務(wù)的庫。那么我推薦兩個庫。一個是基礎(chǔ)版本的react-cropper另一個是被別人封裝過的。react-cropper-pro。可以根據(jù)自己的情況所需選擇自己需要的庫。在這里我主要說說react-cropper這個庫，那么如果想要了解這個react-cropper-pro這個庫的同學(xué)可以看看，該庫作者的介紹，說的很詳細(xì)。React-cropper-pro
簡介
那么react-cropper這個庫到底能干什么呢？
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;
// 如果感覺卡頓，請注釋下面這一行
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;
他會根據(jù)你的鼠標(biāo)拖動，自動當(dāng)裁切區(qū)域內(nèi)的圖片轉(zhuǎn)換為base64格式的圖片。如果你覺得會又明顯的卡頓，是因?yàn)樗O(jiān)聽的是裁切框移動事件，只要裁切框移動就會觸發(fā)。這樣是不利于用戶體驗(yàn)的，可以通過防抖、節(jié)流的方式來控制他，讓他達(dá)到一個比較好的體驗(yàn)效果。它里面有很多的屬性。具體學(xué)習(xí)的同學(xué)可以去看看源碼。畢竟業(yè)務(wù)為主。
總結(jié)
這就是一個比較好用的裁切庫，當(dāng)然你也可以直接是直接使用cropperjs來進(jìn)行封裝。我主要是完成公司的業(yè)務(wù)，拿到一個較高的績效。
以上就是react cropper圖片裁切實(shí)例詳解的詳細(xì)內(nèi)容，更多關(guān)于react cropper圖片裁切的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
React+echarts?(echarts-for-react)?實(shí)現(xiàn)中國地圖及省份切換功能
這篇文章主要介紹了React+echarts?(echarts-for-react)?畫中國地圖及省份切換,有足夠的地圖數(shù)據(jù)，可以點(diǎn)擊到街道，示例我只出到市級，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)需要的朋友可以參考下2022-11-11
在Create React App中使用CSS Modules的方法示例
本文介紹了如何在 Create React App 腳手架中使用 CSS Modules 的兩種方式。有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。2019-01-01
React實(shí)現(xiàn)生成和導(dǎo)出Word文檔的方法詳解
React是一個流行的JavaScript庫,用于構(gòu)建現(xiàn)代前端應(yīng)用程序,本文將深入探討如何在React中生成和導(dǎo)出Word文檔,感興趣的小伙伴可以學(xué)習(xí)一下2023-09-09
這篇文章主要為大家介紹了create-react-app開發(fā)常用配置教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
React Native中NavigatorIOS組件的簡單使用詳解
這篇文章主要介紹了React Native中NavigatorIOS組件的簡單使用詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
react實(shí)現(xiàn)Radio組件的示例代碼
這篇文章主要介紹了react實(shí)現(xiàn)Radio組件的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了記錄一次完整的react hooks實(shí)踐，通過一個簡單示例，介紹了react hooks，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-03-03
這篇文章主要介紹了使用React.forwardRef傳遞泛型參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
在react項(xiàng)目中webpack使用mock數(shù)據(jù)的操作方法
這篇文章主要介紹了在react項(xiàng)目中webpack使用mock數(shù)據(jù)的操作方法,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06
一百多行代碼實(shí)現(xiàn)react拖拽hooks
這篇文章主要介紹了一百多行代碼實(shí)現(xiàn)react拖拽hooks，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03