阿里云oss图片的常用处理方法小结

代码转格式，缩略图

HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。

如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。
canvas.toDataURL(type, encoderOptions);
在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。

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

const isWebp = () => {
  try {
    return (
      document
        .createElement('canvas')
        .toDataURL('image/webp')
        .indexOf('data:image/webp') === 0
    )
  } catch (err) {
    return false
  }
}

oss图片缩放 resize

图片格式只能是：jpg、png、bmp、gif、webp、tiff。

文件大小不能超过 20MB。
使用图片旋转时图片的宽或者高不能超过 4096。
原图单边大小不能超过30,000。

oss图片处理官方文档链接
imgUrl + ?x-oss-process=image/resize, 后边参数用逗号隔开

1. 指定宽高缩放 m
   
   通俗点就是说，
   1、如果你设定的新尺寸宽高都设了并且比例和原图不一样，lfit,mfit等比例，都只满足一条边刚好符合，另一条lfit会小于你设定的，mfit会大于你设定的；fill,pad,fixed强制新图为你设定尺寸，fill会居中裁剪，pad指图像是按比例的，小于图片部分填充【默认白色】，fixed直接变形成你要的尺寸；
   2、如果你设定的新尺寸宽高只设定了一个；pad,fill会默认你另一个尺寸和设定的一样，进行变换，同上，其他只有一个值就是按比例缩放，长一样
   例子：http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,m_lfit,h_100,w_100

2. 按比例缩放 p
   取值范围1-1000，用法p_50，即缩放为原图的50%；
   例子：http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,q_50

格式转换

可转格式同缩放，但文档说gif 格式保存成 gif 格式，非 gif 格式是按原图格式保存。我觉得翻译过来也就是说非gif是不能强求变成这种格式的，那也就是不能转呗

例子：http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.gif?x-oss-process=image/resize,w_200/format,webp

转成JPG的时候可以对图片的显示进行控制【interlace】

interlace
1、普通版，自上而下的扫描式 【取值0】
2、先模糊后逐渐清晰（在网络环境比较差时明显） 【取值1】
?x-oss-process=image/format,jpg/interlace,1

成 jpg 或 webp可以质量变换【quality，取值1-100，指百分比】

1、q 决定图片的相对质量，对原图按照 q% 进行质量压缩；原图质量*q
2、Q 把原图质量压到Q%；100%*Q
?x-oss-process=image/resize,w_100,h_100/quality,Q_80

获取图片信息

?x-oss-process=image/info