用户上传的图片长宽比例往往是不固定的，但是我们显示的区域又是固定的，或者上传了一个100 * 100 的图片，实际体积却有5M,所以需要我们对图片进行处理，一方面，可以避免图片变形，另一方面，可以加快图片加载速度。
阿里云对象存储 OSS和华为云对象储存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,但是一些复杂的场景，这样就力不从心。
更好的处理方式
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
object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用高度和宽度确定的框。
图片本身尺寸和体积不会变。
转自：luch的博客
