在很多應(yīng)用需要上傳本地圖片然后再按尺寸適當(dāng)裁剪以符合網(wǎng)站對圖片尺寸的要求 。最常見的就是各用戶系統(tǒng)要求用戶上傳和裁剪頭像的應(yīng)用 。今天我給大家介紹的是一款基于HTML5和jQuery的圖片上傳和裁剪插件，它叫Croppie 。
運(yùn)行效果圖：
HTML
首先我們將相關(guān)js和css文件載入head中 。
接下來我們在頁面上放置一個圖片上傳按鈕，我們可以用css將type="file"的文件選擇控件轉(zhuǎn)成按鈕樣式 。選擇完圖片后，在#upload-demo展示上傳圖片，以及調(diào)用裁剪插件Croppie 。#result用來展示裁剪后的圖片 。
CSS
使用以下CSS代碼，我們很完美的將選擇文件的控件轉(zhuǎn)成按鈕的樣式，其實就是將type="file"透明度設(shè)成0，然后和button重疊 。此外，我們先將圖片裁剪區(qū)域.crop設(shè)置為不可見，等選擇文件后再顯示 。
jQuery
首先利用HTML5的FileReader API讀取本地文件，然后$('#upload-demo').croppie()調(diào)用了Croppie插件 。Croppie的選項viewport：可以設(shè)置所裁剪圖片的寬度和高度，以及類型(圓形或方形);選項boundary是圖片的外圍尺寸 。它還有參數(shù)mouseWheelZoom：是否支持鼠標(biāo)滾輪縮放圖像;showZoom：是否展示縮放條工具;update：回調(diào)函數(shù) 。
當(dāng)點擊“裁剪”按鈕后，再次調(diào)用Croppie的result的方法，返回一張裁剪后的圖片，并顯示在#result中 。
【jQuery實現(xiàn)圖片上傳和裁剪插件Croppie】
推薦閱讀
- 蘋果14手機(jī)圖片及價格-蘋果14什么時候上市圖片及價格
- 微信朋友圈怎么發(fā)文字不發(fā)圖片 微信朋友圈發(fā)文字怎么發(fā)
- ie下jquery.getJSON的緩存問題的處理方法
- 獲得免費的圖片鈴聲方法 手機(jī)中的精靈---N923
- IE8下jQuery改變png圖片透明度時出現(xiàn)的黑邊
- 快手背景圖片怎么換
- 純JavaScript基于notie.js插件實現(xiàn)消息提示特效
- ps合并圖片教程分享
- ai制作正片疊底圖片技巧分享
- vue中tab選項卡的實現(xiàn)思路