ionic2/3實(shí)戰(zhàn)-圖片裁剪

前言

  • 本文將介紹兩款純js圖片裁剪插件，并介紹兩者的差異，各位自行選擇

插件1

  • AlloyCrop騰訊出品，api也很詳細(xì)了，在ionic項(xiàng)目使用有個(gè)小坑，一會(huì)介紹
  • 下載資源，在index.html中引用
    需要alloy_finger.js、transform.js、alloy-crop.js建議在生產(chǎn)環(huán)境使用前把3個(gè)放在一個(gè)js文件中并壓縮
  • 使用教程參考官方文檔，如下圖紅色區(qū)域是小坑所在位置，添加了一個(gè)自定義css，ionic默認(rèn)的圖片最大寬度是100%，這里需要覆蓋掉，否則裁剪后的圖片有偏差，下圖源碼點(diǎn)這里

  • 效果演示

插件2

  • Cropper.js，下載cropper.min.css和cropper.min.js并在index.html中引入
  • 由于本插上稍微復(fù)雜，我這里封裝成一個(gè)公共組件方便調(diào)用，源碼點(diǎn)這里
  • 如下圖調(diào)用插件，傳入圖片url參數(shù)，訂閱裁剪結(jié)果事件即可；下圖代碼
  • 效果演示

兩者差異

  • AlloyCrop壓縮后比較小，配置簡(jiǎn)單；
  • cropperjs功能強(qiáng)大, 截取后效果相比AlloyCrop強(qiáng)一點(diǎn)點(diǎn)，點(diǎn)這里查看官方demo
  • 兩者使用的方式和截取風(fēng)格不同，具體使用哪種各位自行選擇
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容