用於圖片壓縮的JS插件：localResizeIMG

localResizeIMG 官方地址，相關說明已經寫的很清楚，我就再也不搬過來了。

js 圖片壓縮的原理大同小異，這裏直接引用 localResizeIMG 官方文檔的原話：

基本原理是經過canvas渲染圖片，再經過 toDataURL 方法壓縮保存爲base64字符串（可以編譯爲jpg格式的圖片）。

使用步驟（React 環境）：

$ npm install lrz --save

$ import lrz from 'lrz';
複製代碼

lrz 壓縮以後返回 Promise 對象，壓縮後的數據提供 3 種方式：formData、file（即 Blob 對象）、base64，而後按需使用對應數據。我這裏由於要上傳到阿里雲 OSS，因此使用的 file。可是OSS JS SDK未提供直接上傳 Blob 的方法，須要轉換blob->arrayBuffer->OSS.Buffer。 示例代碼（結合 OSS 上傳，部分函數未貼出）：

function blob2OssBuffer(blobobj) {
  var reader = new FileReader();
  reader.readAsArrayBuffer(blobobj);
  return new Promise((reslove, reject) => {
    reader.onload = (event) => {
      // 這裏特別注意返回的buff。最開始我覺得是reader就是buffer
      var buffer = new OSS.Buffer(event.target.result);
      reslove(buffer);
    };
    reader.onerror = (error) => {
      reject();
    }
  })
}

export function upload2OssPic (client, file) {
  const fileinfo = file.file;
  const { name } = fileinfo;
  const key = guid() + name.substring(name.indexOf('.'));

  return lrz(fileinfo, { quality:0.6 }).then(rst => {
    return blob2OssBuffer(rst.file);
  }).then(buf => {
    return client.put(key, buf);
  }).then(res => {
    let url = res.url;
    if (!url) {
      url  = `https://${bucket}.${region}.aliyuncs.com/${res.name}`;
    }
    return url;
  }).catch(err => {
    console.log(err);
  });
};
複製代碼

---

1. 阿里雲 sdk 前端如何上傳 blob 對象到 OSS
2. 文件和二進制數據的操做
3. 對象存儲 OSS > SDK 參考 > JavaScript-SDK > 快速開始-瀏覽器