演示一下

自己試試

點我直接進入演示頁面

介紹說明

在前端壓縮好要上傳的圖片可以更快的發送給后端，因此也特別適合在移動設備上使用。

• 兼容IOS&Android，修復了IOS和Android某些版本已知的BUG（這也是插件最有意義的存在價值）。

• 按需加載文件，僅需引入lrz.bundle.js文件，例如當檢測是IOS7的用戶，那么會自動異步再載入修復BUG的文件，而無需擔心浪費寶貴的帶寬開銷。

• 原生JS編寫，不依賴例如jquery等第三方庫。

如何獲取

通過以下方式都可以下載：

1. 執行npm i lrz（推薦）
2. 或者git clone本庫
3. 要么 在頁面右側點擊download zip

接著在頁面中引入

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

請絕對不要刪除【dist】目錄下的任何文件，那些是某些情況自動按需載入的文件。

如何使用

方式1:

如果您的圖片來自用戶拍攝或者上傳的，您需要一個input file來獲取圖片。

<input onchange="upload()" type="file" capture="camera" />

接著通過change事件可以得到用戶選擇的圖片

function upload () {
    lrz(this.files[0])
        .then(function (rst) {
            // 處理成功會執行
        })
        .catch(function (err) {
            // 處理失敗會執行
        })
        .always(function () {
            // 不管是成功失敗，都會執行
        });
});

方式2：

如果您的圖片不是來自用戶上傳的，那么也可以直接傳入圖片路徑。

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

后端處理

• 后端最終會收到前端發送的base64字符串，接著處理字符串為圖片即可。

• 具體請使用關鍵字base64 轉 image 開發語言進行谷歌|百度。

• 前端生成的結果中有一個base64Len，這是字符串的長度，后端應該核對以確認是否提交完整。

API

具體參數說明請查看WIKI。

兼容性

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

FAQ

有疑問請直接在 issues 中提問

• Q：有時拍攝完照片后，頁面自動刷新或閃退了。

• A：雖然已作了優化處理，但內存似乎還是爆掉了，常見于低配android手機。

• Q: 怎么批量上傳圖片?

• A: 您可以自己寫個循環來傳入用戶多選的圖片，但在移動端上請勿這樣做，原因同上。

• Q: 直接傳入圖片路徑的無法生成圖片

• A: 可能是跨域的問題，具體請看CORS_enabled_image

• Q: 想要商用可以嗎？

• A: 沒問題，但請留意issue里已知的問題。

項目主頁：http://www.baiduhome.net/lib/view/home/1439259981801