更好的oss,obs对象处理库

用户上传的图片长宽比例往往是不固定的，但是我们显示的区域又是固定的，或者上传了一个100 * 100 的图片，实际体积却有5M,所以需要我们对图片进行处理，一方面，可以避免图片变形，另一方面，可以加快图片加载速度。

比如下图： obs 示例图片

获取图片信息可以增加/info 参数

https://e-share.obs.cn-north-1.myhuaweicloud.com/example.jpg?x-image-process=image/info

返回值

{
"date:create":"2022-12-07T08:21:44+00:00",
"date:modify":"2022-12-07T08:21:44+00:00",
"format":"JPEG",
"height":2000,
"size":1046583,
"width":2668
}

图片处理

将该图片裁切为100*100的webp 格式

图片url处理后

https://e-share.obs.cn-north-1.myhuaweicloud.com/example.jpg?x-image-process=image/resize,w_100,h_100,m_fill,limit_0/format,webp

获取处理后图片信息

https://e-share.obs.cn-north-1.myhuaweicloud.com/example.jpg?x-image-process=image/resize,w_100,h_100,m_fill,limit_0/format,webp/info

{
"date:create":"2022-12-07T08:28:36+00:00",
"date:modify":"2022-12-07T08:28:36+00:00",
"format":"webp",
"height":100,
"size":2210,
"width":100
}

可以看到图片明显变小。

对于简单的场景我们可以通过字符串拼接去处理url,但是一些复杂的场景，这样就力不从心。

更好的处理方式

ObjectProcess

obs,oss 等对象储存URL对象处理参数操作。提供一些别名使操作更加方便。

npm

npm install object-process -S

cdn

unpkg

https://www.unpkg.com/browse/object-process

jsdelivr

https://www.jsdelivr.com/package/npm/object-process

import ObjectProcess from 'object-process'

const imgURl = 'https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/crop,x_100,y_50'


const urlProcess = new ObjectProcess(imgURl, {
  processName: 'x-oss-process'
})

/***
 * or
 * const urlProcess = new ObjectProcess()
 * urlProcess.process(imgURl)
 */
urlProcess.resize({ w: 200 }).resize('h_100,m_fill').rotate(90).webp()
urlProcess.append('resize', {
  w: 200,
  height: 200
}).set('format', 'png')

urlProcess.delete('crop')

urlProcess.has('resize')

urlProcess.set('resize', {
  w: 300
})

urlProcess.append('resize', 'w_400,h_500,limit_0')


urlProcess.toString() // https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image%2Fresize%2Cw_400%2Ch_500%2Climit_0%2Frotate%2C90%2Fformat%2Cpng&

官方文档直达

应用场景

oss

/***
 * 如果使用cdn
 * const urlProcess = new ObjectProcess.default()
 */
import ObjectProcess from 'object-process'

const imgURl = 'https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg'

const urlProcess = new ObjectProcess(imgURl, {
  processName: 'x-oss-process'
}).append('resize', {
  w: 400,
  h: 500,
  m: 'fill',
  limit: 0
}).webp()


urlProcess.toString() //  https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image%2Fresize%2Cw_400%2Ch_500%2Cm_fill%2Climit_0%2Fformat%2Cwebp

vue组件（vue2）

obs-img

<template>
  <img :src="imgSrc">
</template>

<script>
import ObjectProcess from 'object-process'
export default {
  name: 'obs-image',
  props: {
    // 原始url
    url: {
      type: String,
      default: () => ''
    },
    /***
     * resize 参数
     * w_400,h_500
     * {w: 400, h: 500}
     */
    resize: {
      type: [String, Object],
      default: () => ''
    },
    /***
     * resize m 参数。默认fill
     */
    resizeMode: {
      type: String,
      default: () => 'fill'
    },
    /***
     * 是否转换webp 格式。
     * 默认是
     */
    webp: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    imgSrc () {
      if (this.url) {
        const urlProcess = new ObjectProcess(this.url)
        if (this.resize) {
          // urlProcess.resize(this.resize)
          urlProcess.append('resize', this.resize)
          if (this.resizeMode) {
            urlProcess.resize({
              m: this.resizeMode,
              limit: 0
            })
          }
        }
        if (this.webp) {
          urlProcess.webp()
        }
        return urlProcess.toString()
      } else {
        return ''
      }
    }
  }
}
</script>

 <ObsImage url="https://e-share.obs.cn-north-1.myhuaweicloud.com/example.jpg" resize="w_400,h_500"></ObsImage>
 <ObsImage url="https://e-share.obs.cn-north-1.myhuaweicloud.com/example.jpg" :resize="obsImgResize"></ObsImage>

/***
obsImgResize = {
 w: 500,
 h: 400
}
*/

更多应用场景，详见

如果你还不确实是否使用它，可以查看一些常见的使用场景

为什么不是

css object-fit

moz object-fit

object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用高度和宽度确定的框。

图片本身尺寸和体积不会变。

打赏赞(1)