react?cropper圖片裁切實例詳解
摘要
在最近的業(yè)務工作中，需要提供一個上傳圖片前先剪切圖片的功能。有了這個業(yè)務需求，我就在尋找一些可以幫助我完成業(yè)務的庫。那么我推薦兩個庫。一個是基礎版本的react-cropper另一個是被別人封裝過的。react-cropper-pro。可以根據(jù)自己的情況所需選擇自己需要的庫。在這里我主要說說react-cropper這個庫，那么如果想要了解這個react-cropper-pro這個庫的同學可以看看，該庫作者的介紹，說的很詳細。React-cropper-pro
簡介
那么react-cropper這個庫到底能干什么呢？
1.點擊Demo查看demo
2.github地址
安裝
npm install --save react-cropper
使用
直接粘貼代碼就可以實現(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ù)你的鼠標拖動，自動當裁切區(qū)域內的圖片轉換為base64格式的圖片。如果你覺得會又明顯的卡頓，是因為他監(jiān)聽的是裁切框移動事件，只要裁切框移動就會觸發(fā)。這樣是不利于用戶體驗的，可以通過防抖、節(jié)流的方式來控制他，讓他達到一個比較好的體驗效果。它里面有很多的屬性。具體學習的同學可以去看看源碼。畢竟業(yè)務為主。
總結
這就是一個比較好用的裁切庫，當然你也可以直接是直接使用cropperjs來進行封裝。我主要是完成公司的業(yè)務，拿到一個較高的績效。
以上就是react cropper圖片裁切實例詳解的詳細內容，更多關于react cropper圖片裁切的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要為大家詳細介紹了react結合bootstrap實現(xiàn)評論功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
本篇文章主要介紹了淺談react受控組件與非受控組件(小結)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
react數(shù)據(jù)管理機制React.Context源碼解析
這篇文章主要為大家介紹了react數(shù)據(jù)管理機制React.Context源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
React?Hooks useReducer?逃避deps組件渲染次數(shù)增加陷阱
這篇文章主要介紹了React?Hooks?之?useReducer?逃避deps后增加組件渲染次數(shù)的陷阱詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了React 全面解析excel文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
解決React報錯Property value does not exist&n
這篇文章主要為大家介紹了React報錯Property value does not exist on type HTMLElement解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了react路由動畫跳轉功能,大概思路是下載第三方庫?引用,創(chuàng)建css文件引用,想要實現(xiàn)跳轉動畫功能,就在那個組件的根節(jié)點綁定classname屬性即可,在跳轉的時候即可實現(xiàn),需要的朋友可以參考下2023-10-10
這篇文章主要為大家介紹了解決jest處理es模塊示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
react實現(xiàn)數(shù)據(jù)監(jiān)聽方式
這篇文章主要介紹了react實現(xiàn)數(shù)據(jù)監(jiān)聽方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細介紹了React的事件處理，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03