使用React-Cropper-Pro實現(xiàn)圖片裁切壓縮上傳
在前端開發(fā)的過程中, 我們經(jīng)常遇到文件上傳或者圖片上傳的需求, 有些場景中可能還會要求上傳圖片后對圖片進行裁切, 壓縮. 對于不想加班的程序員來說, 第一要義就是使用斯第三方庫. 雖然像我們熟悉的antd, element等庫提供了上傳組件:
image.png
但是這些第三方UI庫一方面體積比較龐大, 不夠輕量, 另一方面不支持裁切, 壓縮等功能, 所以還是需要自己實現(xiàn)或者整合第三方庫實現(xiàn), 當(dāng)然 antd 提供了一個圖片裁切的庫 antd-img-crop, 但是使用上極度“難受”(受限), 無法自由裁切圖片, 同時也無法提供壓縮能力:
所以這個方案也直接pass. 最終為了實現(xiàn)想要的效果,我還是決定犧牲自己, 手動實現(xiàn)一個支持上傳裁切并壓縮的組件, 并取名為react-cropper-pro。
react-cropper-pro 使用介紹
react-cropper-pro是一款簡單輕量的圖片上傳 + 裁切 + 壓縮 組件, 不依賴antd / element等第三方UI, 快速實現(xiàn)圖片處理相關(guān)操作, 底層依賴react-cropper。
安裝
yarn add react-cropper-pro
使用
import CropperPro from 'react-cropper-pro';
export default () =>
<CropperPro
defaultImg=""
onChange={(file) => console.log(file)}
onDel={(image) => console.log('remove', image)}
/>;
image.png
API介紹
技術(shù)實現(xiàn)
技術(shù)上主要有以下幾個核心點:
- 實現(xiàn)文件上傳組件樣式(主要是覆蓋原生input[file]的“純潔UI”)。
- 實現(xiàn)突圖片裁切。
- 實現(xiàn)圖片壓縮。
- 包裝成react組件并發(fā)布到npm。
接下來和大家簡單介紹一下實現(xiàn)細(xì)節(jié).
1、實現(xiàn)文件上傳組件樣式
我們都知道元素的input文件上傳組件采用的默認(rèn)樣式非常簡陋, 所以我們需要通過某種方式替換原生樣式, 這里和大家分享一下我實現(xiàn)的方式。
其實很簡單, 就是用定位的方式將一個同樣大小的div覆蓋在input上面, 然后把讓div事件穿透, 能響應(yīng)input的事件即可. 核心代碼如下:
<div className="xi-cropper-upload">
<input type="file" onChange={handleChange} accept="image/gif,image/jpeg,image/jpg,image/png" />
<div className="xi-cropper-file">
</div>
</div>
其次就是需要用戶在上傳完圖片之后, 圖片能展示在上傳區(qū)域, 如下:
這塊的完整代碼如下:
<div className="xi-cropper-upload">
<input type="file" onChange={handleChange} accept="image/gif,image/jpeg,image/jpg,image/png" />
<div className="xi-cropper-file">
{
cropData ? <img src={cropData} /> : '+'
}
{
!!cropData && <span className="xi-cropper-del" onClick={handleDel}>?</span>
}
</div>
</div>
2、實現(xiàn)突圖片裁切
圖片裁切這里我采用了 react-cropper 這個庫, 雖然不能直接實現(xiàn)圖片上傳, 但是它的圖片裁切能力還是很強大的. 我們需要實現(xiàn)的效果是圖片上傳后會出現(xiàn)上傳彈窗, 顯示裁切區(qū)域, 如下：
這里彈窗的實現(xiàn)我采用了React-Dom的createPortal API, 它可以實現(xiàn)彈窗dom掛載在指定的容器上, 很多組件庫的組件比如抽屜, Modal, DropDown都采用了類似的實現(xiàn)原理, 我之前也寫了一篇文章來介紹如何使用 createPortal 的, 感興趣的朋友可以學(xué)習(xí)參考一下:
??《精通react/vue組件設(shè)計》之配合React Portals實現(xiàn)一個功能強大的抽屜(Drawer)組件。??
這塊的核心源碼可以參考github倉庫對應(yīng)的第134行。
文件路徑如下: https://github.com/MrXujiang/react-cropper-pro/tree/main/src/crop。
3、實現(xiàn)圖片壓縮
圖片壓縮這塊主要是基于產(chǎn)品業(yè)務(wù)場景來設(shè)計, 這里我分了4個檔:
- 不壓縮
- 高
- 中
- 低
如下:
這一塊主要是利用了canvas和 cropper 的能力, 我們通過控制canvas對象的寬高比例, 和canvas提供的toBlob 來實現(xiàn)圖片的壓縮, 核心代碼如下：?
if (typeof cropper !== "undefined") {
setCropData(cropper.getCroppedCanvas().toDataURL());
const rate = 1 / (4 - imgLevel);
const { width, height } = cropper.getCropBoxData();
cropper.getCroppedCanvas({
width: width * rate,
height: height * rate,
imageSmoothingQuality: imgLevelValueMap[imgLevel],
fillColor: 'transparent',
}).toBlob((blob: Blob) => {
if(blob) {
const time = Date.now();
let croppedFile:any = new File([blob], fileRef.current.name, {
type: fileRef.current.type,
lastModified: Date.now(),
});
croppedFile.uid = time;
onChange && onChange(croppedFile)
}else {
new Error('圖片裁切失敗');
}
}, fileRef.current.type, rate)
}
當(dāng)然有關(guān) canvas 的toBlob API不熟悉的朋友可以移步MDN：
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob。
4、包裝成react組件并發(fā)布到npm
最后再來看看應(yīng)用場景, 目前 react-cropper-pro 已經(jīng)應(yīng)用于H5-Dooring 可視化搭建平臺中, 來實現(xiàn)圖片更精準(zhǔn)的控制：
感興趣的朋友可以體驗一下, 當(dāng)然還有很多內(nèi)容平臺, 因為有富文本或者md等編輯器的寫作能力, 所以也會涉及到對圖片的控制, 所以這些都是 react-cropper-pro 的應(yīng)用領(lǐng)域。
