用于图片压缩的JS插件：localResizeIMG

最新推荐文章于 2024-05-11 10:00:57 发布

weixin_34008805

最新推荐文章于 2024-05-11 10:00:57 发布

阅读量834

点赞数

文章标签： javascript 前端 ViewUI

原文链接：https://juejin.im/post/5c8d16ebf265da2dc232333f

版权

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);
  });
};
复制代码