圖片壓縮,原生JS

        在移動互聯網高速發展的今天,有太多太多的應用需要用戶在移動Web上傳圖片文件。然而在上傳圖片前就對圖片進行了壓縮處理,從而提高圖片的上傳效率,減少用戶的流量浪費,後臺處理和用戶體驗也會得到提升。

爲什麼要這樣做

        遇到的問題:

        1:在低網速下上傳圖片進度緩慢,用戶體驗差

        2:後臺處理較大的文件壓力大。

        3:業務需求要求文件大小、、等等(或許還有更多)

        在處理以上問題之前,需要給自己一些疑問

        1:圖片是否有必要保存原圖

        2:主要使用場景在移動端還是在PC端(圖片處理消耗的性能和速度需要考慮)

        3:需要上傳的圖片一般大小大致在什麼範圍(處理圖片的性能消耗時長)



ImgB64.js用法

    1、創建ImgB64,初始化壓縮圖片的參數:如下

        var img=new ImgB64({
           size:1024,//需要壓縮圖片的最小值。不填默認壓縮所有,此處單位是Kb
           quality:20//圖片自定義壓縮質量,不填默認50(最大值是100)
       })
   2:引用,因爲讀取文件,img加載讀取原始高寬,引用了異步的onload,此處傳入方法執行處理後的圖片base64。
       img.setOption({
           files:ele.files[0],
           showImg:function(imgBase64){

           },
       callback:function(imgBase64){
           console.log(imgBase64);
       }
   })
   
   Git:ImgB64
   《後續持續完善……》


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章