Apiumc Gateway
图片处理组件
### 图片处理。
图片是Web应用打开快慢关键因子，因此合适尺寸和格式能带来极大的速度提升，Apiumc网关的图片处理，在不改变原应用的情况下，来调整图片尺寸、增加水印、格式转码等等功能，同时也支持智能适配按浏览器兼容性从avif格式、webp格式、png格式转码，从而帮助应用把图片大小减少60%-90%，让应用快如闪电，大幅改善原应用的交互质量。
Apiumc配置图片处理方式有分为两种方式快捷参数和图片模板，同时查看图片参数处理后的效果有以下方式
1. 可以通过在图片的url的QueryString上追加`umc-image=xxx`，其中xxx可以是图片处理的快捷参数或图片模板。
2. 可以通过在图片的url路径上的头部加上`/UMC.Image/xxx/`等同上面效果。
**注意**：图片处理后会持久化保存并缓存，可手动在图片url后面追加`&umc=src`或?`umc=src`来获取新版本
### 快捷参数
快捷参数由三部分组成
>[`方位`][`尺寸`][`格式`]
#### 方位参数
|参数|样例|说明|
|--|--|--|
|w |w100 |表示按宽度缩小 |
|h |w100 |表示按高度缩小 |
|c |c100 |全图居中缩放指定尺寸 |
|t |t100 |向上或向左裁剪指定尺寸 |
|m |m100 |正中裁剪指定尺寸 |
|b |b100 |向下和向右裁剪指定尺寸 |
#### 尺寸参数
分为单值、-对值和x对值
|参数|样例|说明|
|--|--|--|
|单值 |100 |表示按固定正方式缩小 ，样例表示宽高各100 |
|-对值 |100-200 |表示限定尺寸，样例表示宽限定100高限定200 单边超过，则单边缩放，等同w、h方位参数，双边比例超过，则按固定大小进行裁剪 |
|x对值 |100x200 |表示按固定尺寸缩小，样例：宽100、高200 |
#### 图片转码
支持对gif、jpeg、webp、png、avif格式的相互转换，默认值为原图格式
|参数|样例|说明|
|--|--|--|
|g |w200g |转码为gif图片，样例：表示 宽度缩放到200并转化为gif格式图片 |
|j |w200j |转码为jpeg图片，样例：表示 宽度缩放到200并转化为jpeg格式图片 |
|w |w200w |转码为webp图片，样例：表示 宽度缩放到200并转化为webp格式图片 |
|p |w200p |转码为png图片，样例：表示 宽度缩放到200并转化为png格式图片 |
|a |w200a |转码为avif图片，样例：表示 宽度缩放到200并转化为avif格式图片 |
|o |w200o |适配图片格式，样例：表示 宽度缩放到200并根据浏览器从avif--webp--png来适配格式 |
注意：avif图片浏览器支持有限，webp图片主流浏览器都支持，但要考虑国产各不一样的浏览器，建议图片优化采用了适配格式。
### 图片模板
在云桌面-应用设置-托管应用，点击应用，打开应用配置中再点击图片处理如下图：
点击下出现如下图：
再此配置路径格式，支持用一个`*`进行前后对比，也支持图片Content-Type类型配置，当图片的请求路径或Conent-tye能配对图片模板，则采用模板参数来处理图片。
**注意**：在此配置的路径也可以通过在url的QueryString上加`umc-image=[模板名]`来使用，快速查看效果
再点击配置的路径，则会出现图片模板配置如下图：
#### 图片宽度
设置图片的宽度，正值为固定宽度，负值为限定宽度
#### 图片高度
设置图片的高度，正值为固定高度，负值为限定高度
#### 裁剪方式
对图片进行裁剪的方式
居中缩放：是把图片放入新尺寸中间，短边居中的效果，是缩小效果
向上裁剪：对图片长图进行向上裁剪，对图片的宽图进行向左裁剪。
居中裁剪：对图片正中进行裁剪。
向下裁剪：对图片长图进行向下裁剪，对图片的宽图进行向右裁剪。
#### 图片格式
可设置为原图格式、gif、png、jpeg、webp和适配格式
**注意**：只设置的单边值，裁剪方式设置无效。
#### 水印方式
方式水印可分可设置图片水印和文本水印
图片水印设置如下图：
**提示**：水印图片，会自动设置50%透明度复加到了图片上
文本水印设置如下图：
**提示**：文本颜色的支持8位和4位颜色的透明度设置