點我直接進入演示頁面html
在客戶端壓縮好要上傳的圖片能夠節省帶寬更快的發送給後端,特別適合在移動設備上使用。jquery
已踩過不少坑,通過幾個版本迭代,以及不少不少網友的反饋幫助、機型測試android
按需加載(會根據對應設備自動異步載入JS文件,節省沒必要要帶寬)git
原生JS編寫,不依賴例如jQuery
等第三方庫,支持AMD or CMD規範。github
經過如下方式均可如下載:chrome
npm i lrz
(推薦)bower install lrz
接着在頁面中引入npm
<script src="./dist/lrz.bundle.js"></script>
若是您的圖片來自用戶拍攝或者上傳的,您須要一個input file
來獲取圖片。後端
<input id="file" type="file" accept="image/*" />
接着經過change事件能夠獲得用戶選擇的圖片api
document.querySelector('#file').addEventListener('change', function () { lrz(this.files[0]) .then(function (rst) { // 處理成功會執行 console.log(rst); }) .catch(function (err) { // 處理失敗會執行 }) .always(function () { // 無論是成功失敗,都會執行 }); });
若是您的圖片不是來自用戶上傳的,那麼也能夠直接傳入圖片路徑。
lrz('./xxx/xx/x.png') .then(function (rst) { // 處理成功會執行 }) .catch(function (err){ // 處理失敗會執行 }) .always(function () { // 無論是成功失敗,都會執行 });
IE10以上及大部分非IE瀏覽器(chrome、微信什麼的)