使用阿里云OSS图片处理

前端技术发表留言

阿里云处理图片的服务是收费的，但是有一定的免费数量，数量超过之后按照数量收费。

1、处理旋转方向

拍照会自带设备旋转信息，在安卓手机上会旋转
在阿里OSS使用该参数可以调整方向

https://image-demo.oss-cn-hangzhou.aliyuncs.com/f.jpg?x-oss-process=image/auto-orient,1

参考：https://help.aliyun.com/document_detail/44691.html?spm=a2c4g.11186623.6.1160.1c5d149dByJ2yu

2、获取缩略图

页面中使用的用户头像太多（大多数头像都是原图）的时候回导致页面加载很慢，如果使用的阿里OSS，我们可以用阿里自带的服务压缩图片之后返回（官方文档）。

/**
 * url 原始链接，我们在这里缩放为宽度200
 */
export const getSmallImage = (url, maxWidth = 200) => {
    // s1.xxx.com 开头的所有的图片都会转成小尺寸的图片进行请求
    if (/s1\.xxx\.com.*(\.(a?png|jpe?g|gif|bmp))?$/.test(url)) {
    return `${url}?x-oss-process=image/resize,w_${maxWidth}`;
    }
    return url;
};

// 调用
<img src={getSmallImage("https://s1.xxx.com/a.png")}/>

3、转换图片格式，webp更加小

url?x-oss-process=image/resize,w_375/format,webp 就可以转换，webp图片相对要小一些。

export const getSmallImage = (url, width = 200) => {
  if (/(s1|img3)\.xxx\.com.*$/.test(url)) {
    url = `${url}?x-oss-process=image/resize,w_${width}`;
    // 判断浏览器是否支持webp，如果支持就加载webp
    if (window.isSupportWebp) {
      url = `${url}/format,webp`;
    }
  }
  return url;
};

可以参考Web页面中PNG图片优化中如何判断浏览器是否支持webp。

‍

留下回复