layui-cropper-avatar

Layui頭像裁剪組件

說明

這是一款適用于Layui的[微改整合]第三方組件，基于cropper 3.1.3，實(shí)現(xiàn)點(diǎn)擊一個按鈕彈出裁剪框，完成選擇、裁剪圖片等操作，移動端自適應(yīng)。

社區(qū)組件平臺已經(jīng)有一個cropper 圖片截取(剪裁)上傳組件，可惜我測試中有點(diǎn)問題并不如意，所以就把之前用的jquery插件改成layui組件，兩者很相像，畢竟都是基于cropper.js(一個3.0.0，一個3.1.3)。

使用

NO.1

使用git clone、svn checkout或直接下載壓縮包等方式獲取倉庫代碼，將static中的css和mod的js模塊復(fù)制到你的項(xiàng)目相關(guān)目錄。

代碼目錄結(jié)構(gòu)：

├── index.html

└── static

├── css

│ ├── ImgCropping.css //avatar裁剪框樣式

│ └── cropper.min.css //cropper樣式

└── mod

├── avatar.js //依賴cropper模塊

└── cropper.js //cropper封裝的layui模塊

NO.2

在HTML的head中引入ImgCropping.css和cropper.min.css

NO.3

在HTML的script中調(diào)用模塊(請先閱讀Layui文檔對其模塊化有一定了解)：

layui.config({

base: '/static/mod/' //mod所在目錄

}).use('avatar', function () {

var avatar = layui.avatar;

avatar.render({

success: function (base64, size) {

console.log(base64);

console.log(size);

//ajax upload

}

});

});

avatar模塊定義了兩個函數(shù)：render、base64ToBlob

請用render初始化，base64ToBlob用來把base64圖片轉(zhuǎn)為二進(jìn)制，基本是用不到。

render函數(shù)接收object對象完成一些參數(shù)設(shè)置：

elem {string}

綁定一個元素，點(diǎn)擊它則彈出圖片裁剪框，默認(rèn)是 #uploadAvatar ，所以可以放置一個按鈕，設(shè)置id=uploadAvatar。

imgWidth {Number}

裁剪圖片的寬度(像素)

success {Function}

用戶點(diǎn)擊 確認(rèn)裁剪并上傳頭像 按鈕的回調(diào)，但注意avatar本身不上傳，所以需要在success中上傳。

success傳遞兩個參數(shù)：裁剪后的圖片的base64(image/png)、base64的大小(單位Kb)

示例

index.html是示例，不能直接運(yùn)行它，用nginx或者python啟動一個web服務(wù)：

python2 -m SimpleHTTPServer 5000

訪問127.0.0.1:5000效果大概是這樣的：

ps

如果你要更新cropper.js版本，在上面找到其倉庫，下載dist中cropper.js(UMD)，參考Layui第三方組件規(guī)范改造UMD($固定為layui.jquery即可)

總結(jié)

以上是生活随笔為你收集整理的头像裁剪框html css,GitHub - saintic/layui-cropper-avatar: Layui头像裁剪组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。