目錄

• 支援移動端的前端圖片壓縮庫
• 說明
• 使用方法
• 選項
• 例子
• 接收圖片路徑壓縮
• 接收 `file` 物件壓縮
• 獲取 `base64`
• 獲取 `blob`

支援移動端的前端圖片壓縮庫

前段時間做移動端專案時遇到移動端選擇圖片上傳的問題，在查看了網上的一些圖片壓縮套路後，簡單整合了程式碼，可用於前端上傳圖片前的圖片壓縮處理，相容PC、Android、iOS平臺。
本專案已開源，地址：https://github.com/lyswhut/resizeImg

說明

用於前端上傳圖片前的圖片壓縮處理，相容PC、android、ios平臺。

本專案整合了 jpeg_encoder_basic.js 及 megapix-image.js 。

demo地址：http://stsky.cn/demo/resizeimg/

當需要壓縮大圖（比如手機拍攝的圖片）時本外掛才會發揮作用。
注意：這只是簡單的圖片壓縮，即把原圖縮小比例後再通過canvas畫出來，本外掛對於需要把高解析度（大圖）壓成低解析度（小圖）時才會起效果，不然可能會起到反效果（即壓了反而變大），所以需要先判斷圖片大小再選擇是否進行壓縮處理。

使用方法

壓縮後的檔案在GitHub的dist

<script src="./js/resizeImg.min.js"></script>

選項

/**
 * 圖片壓縮
 * @param {String|Array|Object} imgs 圖片路徑字串/圖片路徑陣列/file物件/Blob物件
 * @param {Object} options
 * @param {Number} [options.width] 圖片需要壓縮的寬度，高度會跟隨調整
 * @param {Number} [options.quality=0.8] 壓縮質量，不壓縮為1
 * @param {String} [options.type] 可選，需要返回的檔案型別，如'image/jpeg'、'image/png'等
 * @param {Function} [options.success(result)] 完成的回撥函式，若type有值，則返回blob，否則返回base64
 */
 

例子

接收圖片路徑壓縮

__resizeImg('test.jpg', {
      width: 200,
      quality: 0.9,
      type: 'image/jpeg',
      success: function($Blob) {
        // formData.append("imgFile", $Blob, "file_" + new Date().getTime() + ".jpg");
        // ...
      }
    })

接收 file 物件壓縮

var dom_input_file = document.querySelector('#file_1')
__resizeImg(dom_input_file.files[0], {
  width: 200,
  quality: 0.9,
  type: 'image/jpeg',
  success: function($Blob){
    // formData.append("imgFile", $Blob, "file_" + new Date().getTime() + ".jpg");
    // ...
  }
})

獲取 base64

通過原圖獲取壓縮後圖片的 base64，可直接當做字串傳給後臺

__resizeImg('test.jpg', {
  width: 200,
  quality: 0.9,
  success: function($base64){
    // resize image $base64
    // ...
  }
})

獲取 blob

通過原圖獲取壓縮後圖片的 blob，可以把 blob 放進 FormData 裡發給伺服器

__resizeImg('test.jpg', {
  width: 200,
  quality: 0.9,
  type: 'image/jpeg',
  success: function($Blob){
    // formData.append("imgFile", $Blob, "file_" + new Date().getTime() + ".jpg"); 
    // ...
  }
})

好用的話請在GitHub給個star哦~