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

演示一下

本身試試

點我直接進入演示頁面html

說明

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

爲何須要

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

    • 圖片扭曲、某些設備不自動旋轉圖片方向,沒有jpeg壓縮算法..
    • 不支持new Blob,formData構造的文件size爲0..
    • 還有某些機型和瀏覽器(例如QQX5瀏覽器)莫名其妙的BUG..
  2. 按需加載(會根據對應設備自動異步載入JS文件,節省沒必要要帶寬)git

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

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

如何獲取

經過如下方式均可如下載:chrome

  1. 執行npm i lrz(推薦)
  2. 執行bower install lrz

接着在頁面中引入npm

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

如何使用

方式1:

若是您的圖片來自用戶拍攝或者上傳的,您須要一個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 () { // 無論是成功失敗,都會執行 }); });

方式2:

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

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

後端處理

後端處理請查看WIKI。

API

具體參數說明請查看WIKI。

兼容性

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

相關文章
相關標籤/搜索