演示一下

自己試試

說明

在客戶端壓縮好要上傳的圖片可以節省頻寬更快的傳送給後端，特別適合在移動裝置上使用。

為什麼需要

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 () {
            // 不管是成功失敗，都會執行
        });

後端處理

API

相容性

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