前端本地客戶端壓縮圖片，兼容IOS，Android，PC、自動按需加載文件

演示一下

本身試試

點我直接進入演示頁面

說明

在客戶端壓縮好要上傳的圖片能夠節省帶寬更快的發送給後端，特別適合在移動設備上使用。

爲何須要

1. 已踩過不少坑，通過幾個版本迭代，以及不少不少網友的反饋幫助、機型測試

   • 圖片扭曲、某些設備不自動旋轉圖片方向，沒有jpeg壓縮算法..
   • 不支持new Blob,formData構造的文件size爲0..
   • 還有某些機型和瀏覽器（例如QQX5瀏覽器）莫名其妙的BUG..

2. 按需加載（會根據對應設備自動異步載入JS文件，節省沒必要要帶寬）

3. 原生JS編寫，不依賴例如jQuery等第三方庫，支持AMD or CMD規範。

儘管如此，在某些 Android 下依然有莫名其妙的問題，在您使用前，請必定大體瀏覽下 issues

如何獲取

經過如下方式均可如下載：

1. 執行npm i lrz（推薦）
2. 執行bower install lrz

接着在頁面中引入

<script src="./dist/lrz.bundle.js"></script>

如何使用

方式1:

若是您的圖片來自用戶拍攝或者上傳的，您須要一個input file來獲取圖片。

<input id="file" type="file" accept="image/*" />

接着經過change事件能夠獲得用戶選擇的圖片

document.querySelector('#file').addEventListener('change', function () { lrz(this.files[0]) .then(function (rst) { // 處理成功會執行 console.log(rst); }) .catch(function (err) { // 處理失敗會執行 }) .always(function () { // 無論是成功失敗，都會執行 }); });

方式2：

若是您的圖片不是來自用戶上傳的，那麼也能夠直接傳入圖片路徑。

lrz('./xxx/xx/x.png') .then(function (rst) { // 處理成功會執行 }) .catch(function (err){ // 處理失敗會執行 }) .always(function () { // 無論是成功失敗，都會執行 });

後端處理

後端處理請查看WIKI。

API

具體參數說明請查看WIKI。

兼容性

IE10以上及大部分非IE瀏覽器（chrome、微信什麼的）