用于图片压缩的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 > 快速开始-浏览器