圖片裁剪是前端開發中常用的功能，比如上傳頭像或者logo的時候，如果尺寸不合適，就需要裁剪一下。如果提供在線裁剪功能的話，用戶就不需要利用其它軟件（如：Photoshop）編輯圖片了。這樣，用戶體驗度就會大大提升。今天給大家介紹一款圖片裁剪插件Cropper.js。這款插件功能強大，定能滿足您在項目中的需求。
Cropper.js官網一覽
官網地址：https://fengyuanchen.github.io/cropperjs/
Github地址：https://github.com/fengyuanchen/cropperjs
安裝方法：
npm安裝
<code>npm install cropperjs/<code>
文件導入
<code><link>
/<code>
使用方法：
<code>new Cropper(element[, options])/<code>
舉個例子：
HTML文件中
<code>/<code>
CSS文件中
<code>/* Ensure the size of the image fit the container perfectly */
img {
display: block;
/* This rule is very important, please don't ignore this */
max-width: 100%;
}/<code>
Js文件中
<code>// import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';
const image = document.getElementById('image');
const cropper = new Cropper(image, {
aspectRatio: 16 / 9,
crop(event) {
console.log(event.detail.x);
console.log(event.detail.y);
console.log(event.detail.width);
console.log(event.detail.height);
console.log(event.detail.rotate);
console.log(event.detail.scaleX);
console.log(event.detail.scaleY);
},
});/<code>
更多例子請參考官網
插件使用舉例
這款插件最大的特點就是功能全面，文檔也很詳細，使用起來也很方便，配置一下options就可以了。有興趣的朋友可以下載下來試一下。我將在今後的文章中繼續介紹有趣的前端插件或者css庫。有興趣的朋友可以關注我或者點讚我，多謝。
分享到:
閱讀更多 程序猿有話說 的文章
