oss 图片处理

Posted 2023-05-02

参考技术A 图片处理文章链接

使用：

原始图片上传到OSS后 ，可以通过简单的RESTful接口，在任何时间、任何地点、任何互联网设备上对图片进行处理。

（ 接口正常上传图片 返回oss图片之后 再对图片进行处理）

>>>接口上传oss照片

1.获取oss相关参数

/api/admin/vendor/uploadToken?path=images/

2.上传图片file到oss

http://zhuoyou-shop-test.oss-cn-hangzhou.aliyuncs.com/

3.拼接图片地址：

图片地址 =  host(接口1返回的)+dir(接口1返回的)+file.name

eg：......

https://zhuoyou-shop-test.oss-cn-hangzhou.aliyuncs.com/images/4.jpg

>>>>>> 图片处理 使用方式有好几种：

>匿名访问（通过添加处理参数对图片进行处理）

通过如下格式的三级域名匿名访问处理后的图片：

http://.......?x-oss-process=image/<yourAction>,<yourParamValue>

>授权访问 eg:

let OSS =require('ali-oss');

let client =new OSS(accessKeyId:'',accessKeySecret:'',bucket:'',endpoint:'');

let signUrl = client.signatureUrl('example.jpg', expires:600,'process':'image/resize,w_300');

过期时间10分钟, 图片处理式样"image/resize,w_300"

>SDK访问  eg:

let OSS =require('ali-oss');

.......

 缩放 client.signatureUrl('example.jpg', expires:3600,process:'image/resize,m_fixed,w_100,h_100') 

图片处理功能也很多:  

获取图片信息 ,  图片格式转换 ,  图片缩放 ,  图片裁剪 ,  图片旋转 ,  图片效果 ,  图片水印 ,  自定义图片处理样式 ,  级联处理

以下都用的是第一种方式 匿名访问 方式处理图片：http://.......?x-oss-process=image/xx,xx

有各个图片操作指南地址

指南地址

1.图片水印介绍

介绍地址

水印参数： watermark

t 可选参数，指定水印的透明度。

g 可选参数，指定水印在图片中的位置，[nw,north,ne,west,center,east,sw,south,se]

x 可选参数，指定水印的水平边距， 即距离图片边缘的水平距离。水印位置是左上、左中、左下、右上、右中、右下

y 可选参数，指定水印的垂直边距，即距离图片边缘的垂直距离， 水印位置是左上、中上、右上、左下、中下、右下

voffset 可选参数，指定水印的中线垂直偏移。水印位置在左中、中部、右中时，可以指定水印位置根据中线往上或者往下偏移

图片水印参数：image

文字水印参数：

text必选参数 ，指定文字水印的文字内容。参数值为文字内容进行Base64编码后的字符串。

(文字水印内容必须是通过以下方法进行Base64编码后的字符串  最大长度为64个字符（即支持汉字最多20个左右）。)

type 可选参数，指定文字水印的文字类型。

默认值：wqy-zenhei（ 编码后的值：d3F5LXplbmhlaQ）

color 可选参数，指定文字水印的文字颜色。默认值：000000（黑色）

size 可选参数，指定文字水印的文字大小（单位为px）。(0,1000]

shadow可选参数，指定文字水印的阴影透明度。[0,100]

rotate 可选参数，指定文字顺时针旋转角度。[0,360]

fill 可选参数，指定是否将水印铺满原图。0、1

1：表示将水印铺满原图。

0：表示不将水印铺满全图。

~水印图片目前仅支持 PNG、JPG 和 WebP 格式。

加水印图片后缀示例eg:

?x-oss-process=image/watermark,rotate_30,fill_1,size_20,color_B0C4DE,shadow_50,t_100,g_center,text_SGVsbG8g5Zu-54mH5pyN5YqhIQ

rotate_30:旋转角度

fill:水印是铺满 还是单独一个水印

size:水印文字大小；

color：水印文字颜色

shadow:水印文字阴影

t:水印透明度

g:水印位置

text：水印文字 文字要转换为 base64 格式

测试图片地址：

https://zhuoyou-shop-test.oss-cn-hangzhou.aliyuncs.com/images/affair.jpg?x-oss-process=image/watermark,rotate_30,fill_1,size_20,color_B0C4DE,shadow_50,t_100,g_center,text_SGVsbG8g5Zu-54mH5pyN5YqhIQ

2.压缩图片介绍

介绍地址

https://help.aliyun.com/document_detail/44705.html?spm=a2c4g.11186623.6.1665.58002e93foKl5K

参数 quality

q决定图片的相对质量，对原图按照q%进行质量压缩。例如，如果原图质量为100%，添加quality,q_90参数会得到质量为90％的图片。如果原图质量为80%，添加quality,q_90参数会得到质量72%的图片。

只有为JPG格式的原图添加该参数，才可以决定图片的相对质量。如果原图为WebP格式，添加该参数相当于指定了原图绝对质量，即与参数Q的作用相同。

Q决定图片的绝对质量，将原图质量压缩至Q%，如果原图质量小于指定参数值，则按照原图质量重新进行压缩。

例如，如果原图质量是95%，添加quality,Q_90参数会得到质量90％的图片。如果原图质量是80%，添加quality,Q_90只能得到质量80%的图片。

 该参数只能对保存格式为JPG、WebP的图片使用，对其他格式的图片无效果。 如果同时指定了q和Q，会按照Q的值进行处理。

eg：

?x-oss-process=image/quality,q_80

quality,q_80表示把图片压缩至80%

》在质量变换时不指定Q或者q参数，可能会导致图片占用空间变大。

》由于 仅支持有损压缩的图片格式： JPG和WebP   不支持png   所以要 先将图片转换为jpg格式 在压缩 因为压缩只能是jpg格式

图片格式转换

介绍地址：

https://help.aliyun.com/document_detail/44703.html?spm=a2c4g.11186623.6.1663.53c1e849R2jCmX

参数：format

jpg将原图保存成 jpg 格式，如果原图是 png、webp、bmp 存在透明通道，默认会把透明填充成白色。

png将原图保存成 png 格式。

webp将原图保存成 webp 格式。

bmp将原图保存成 bmp 格式。

gif将 gif 格式保存成 gif 格式，非 gif 格式是按原图格式保存。

tiff将原图保存成 tiff 格式。

（将图片转换成对应格式，包括 jpg、png、bmp、webp、gif、tiff。 不填格式，则默认按原图格式返回。

对于普通缩略请求， 建议 format 参数放到处理参数串最后，例如：image/resize,w_100/format,jpg。

对于缩略+水印的请求，建议 format 参数跟缩略参数放在一起，例如：image/reisze,w_100/format,jpg/watermark,...。

保存成 jpg 格式时，默认是保存成标准型的 jpg (Baseline JPEG)， 如果想指定是渐进式 JPEG (Progressive JPEG), 可以指定参数 interlace，）

eg：

?x-oss-process=image/format,jpg

表示将图片格式转换为jpg图片

所以压缩图片最终的后缀

?x-oss-process=image/format,jpg/quality,q_80

比如：https://zhuoyou-shop-test.oss-cn-hangzhou.aliyuncs.com/images/v2-1665b647c52900b714f2f402fdea0262_r.jpg?x-oss-process=image/format,jpg/quality,q_70

介绍地址：

https://help.aliyun.com/document_detail/99372.html?spm=a2c4g.11186623.6.1644.2ce22e935lduWO

video视频截帧

https://help.aliyun.com/document_detail/64555.html?spm=a2c4g.11186623.2.17.120251b0x3pgs4#concept-kz1-cwc-wdb

操作分类：video

操作名称：snapshot

t指定截图时间。[0,视频时长]  单位：ms

w指定截图宽度，如果指定为0，则自动计算。[0,视频宽度]  单位：像素（px）

h指定截图高度，如果指定为0，则自动计算；如果w和h都为0，则输出为原视频宽高。[0,视频高度]  单位：像素（px）

m指定截图模式，不指定则为默认模式，根据时间精确截图。如果指定为fast，则截取该时间点之前的最近的一个关键帧。比如：fast

f指定输出图片的格式。比如：jpg、png

ar指定是否根据视频信息自动旋转图片。如果指定为auto，则会在截图生成之后根据视频旋转信息进行自动旋转。比如：auto

eg：

使用fast模式截取视频7s处的内容，输出为JPG格式的图片，宽度为800，高度为600。

?x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast

使用精确时间模式截取视频50s处的内容，输出为JPG格式的图片，宽度为800，高度为600。

?x-oss-process=video/snapshot,t_50000,f_jpg,w_800,h_600

比如：http://hr-culture.oss-cn-hangzhou.aliyuncs.com/videos/4.mp4?x-oss-process=video/snapshot,t_2000,f_jpg,m_fast

微信小程序解决存在图片太大而有效显示区域较小--阿里云oss产生缩略图

OSS是使用通过URL尾部的参数指定图片的缩放大小

图片路径后面拼接如下路径：
     ?x-oss-process=image/[处理类型],x_100,y_50[宽高等参数]

     ?x-oss-process=image/resize,m_fill,h_高度,w_宽度,limit_0

//去除之前的参数，添加新的参数
resp.list.map( item => {
    item.logo = item.logo.replace(/?([0-9a-zA-Z/=_-]+)/g,‘?x-oss-process=image/resize,m_fill,h_104,w_104‘)
})