本文主要介绍您在使用 OSS 图片处理时可能遇到的一些常见问题及处理方法。

遇到问题时,如果有明显的参数超过显示等问题,可以使用 OSS 的 ?x-oss-process=image/info 参数查看原始图片中的信息是否超标。OSS 单边长度不能超过 4096,乘积不能高于 4096*4096 。

案例:旋转图片时出现 Picture exceed the maximum allowable rotation range 报错

问题分析:出现这种问题基本都是原图的单边长度超过了 4096 的限制,或者四边乘积超过了 4096*4096。

排查步骤:
  1. 使用 OSS 的 ?x-oss-process=image/info 参数获取图片的信息判断是否超过限制。

  2. 查看 ImageWidth值是 5100,超过 4096 的限制。

处理方案:使用 auto-orient,0 参数关闭自适应,再使用 resize 参数调整图片大小,最后旋转图片。例如:http://test.oss-cn-beijing.aliyuncs.com/123/myphoto5.jpg?x-oss-process=image/auto-orient,0/resize,m_lfit,h_2000,w_2000,limit_1/rotate,90

案例:开启了 OSS 违规检测,图片被判定违规,但是外部还能访问到

OSS 没有封禁功能,图片被判定违规后,违规图片只是被冻结,不在控制台上显示,但不会被删除。原图片还是正常的保存在 bucket 中。如果您不希望违规图片再被访问,需要手动删除违规图片。详情请参见 OSS 违规检测

案例:通过 OSS 获取主色调和图片不符

问题分析:主色调计算不是按照屏幕颜色占比来计算的,而是按照图片中心的主颜色来定的色调,计算逻辑如下:
  1. 计算整个图片的色调的平均值 (avg_hue)。
  2. 遍历每个像素,计算该像素的色调值与 avg_hue 的色差(即将二者相减后取绝对值),如果该色差大于一个阈值,则将该像素加入到“醒目像素”的列表。
  3. 计算整个“醒目像素列表”的颜色均值,得到的结果即为该图片的主色调。

处理方案:可以使用 ?x-oss-process=image/average-hue 参数获取 OSS 图片的主色调参数。

案例:图片水印合成出现黑线



问题分析:这个黑印不是因为图片处理造成的。水印的方式是将两张图片重合,如果水印两张图是不同的 RGB 图片,覆盖后因色差产生黑线是正常现象,任何图片处理工具都会存在这个问题。

使用?x-oss-process=image/average-hue参数可查询图片 RGB 的参数,可在图片链接后加这个参数判断两个图片的 RGB 参数是否一致。RGB 的介绍可以参考浅谈 RGB

处理方案:案例中背景图 RGB 参数为 “0x0e0e0e”,水印的 RGB 参数为 “0xffffff”,增加水印会出现类似边框的效果。可以通过透明度参数 t 来调整透明度将边框去掉,t 的取值范围是 1-100。例如:http://image-demo.img-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_300/watermark,image_cGFuZGEucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMzA,t_90,g_se,x_10,y_10,t_50

案例:通过 CDN 回源 OSS 图片处理不生效

CDN 回源 OSS 图片处理不生效,无论使用的是什么效果,请使用 OSS 的访问域名进行测试,利用下面的 URL 进行基础分析。

http://test.oss-cn-beijing.aliyuncs.com/MomClass/ChuXin/3_2_336_462.jpg@30-30bl

http://test.img-cn-beijing.aliyuncs.com/MomClass/ChuXin/3_2_336_462.jpg@30-30bl

  • img-cn-region.aliyuncs.com 是老版本的 OSS 域名,图片处理的分隔符和图片处理语法和新版的 oss 域名都不一样。
  • oss-cn-region.aliyuncs.com 这类域名是 2017 年以后使用的新域名,不兼容 img 域名的图片处理语法和分隔符 "@" ,需要在 OSS 控制台上手动执行同步,将 img 域名图片处理同步到 OSS 。

上述的老域名的高斯处理效果,如果搬迁到 OSS 的域名后,需要按照新的方式来处理,如下:

http://test.oss-cn-beijing.aliyuncs.com/MomClass/ChuXin/3_2_336_462.jpg?x-oss-process=image/blur,r_3,s_30

案例:图片缩略后颜色变亮了



处理分析:可以使用 PS 等工具获取原图的颜色模式,如果原图是 RGB 的话,压缩是不会变色的,如果原图是 CMYK 的话,压缩后会产生偏色。目前对 CMYK 的兼容还在支持中,图片色彩空间被挤压会产生色彩的变化。

案例:图片在本地可以正常打开,进行图片处理时提示已损坏



问题现象:图片文件在本地可以正常打开,但是上传到到 OSS 无法进行图片处理,反馈图片损坏。

排查步骤:
  1. 获取原始的 OSS URL 地址,使用 ?x-oss-process=image/info 查看原图信息,如果查不到图片信息,直接报错,说明原图就是损坏的。
  2. 可以使用开源的 imagemagic 工具来验证这个问题,将图片做任意调整,如果出现 error 说明图片是损坏的。下面是一个 resize 的测试用例:
    convert -resize 1024x768 1123331261_15353307414801n.jpg
损坏的图片文件在本地可以显示是因为本地的图片查看工具是对图片做了补偿修复。而 OSS 不对损坏的图片进行处理,所以在浏览器上无法显示。

案例:存储在 OSS 内的图片旋转了 90 度

问题现象:通过 OSS 域名访问图片正常。

通过 CDN 访问,发现图片被旋转了 90 度。

问题分析:直接访问 OSS 正常,说明 OSS 存储是没问题的。但是通过 CDN 访问时出现了旋转,说明是浏览器的处理问题,通过图片处理参数 ?x-oss-process=image/info 查看原图参数带有 rotation 90 旋转参数。

处理方案:删除旋转参数即可。

案例:经过 CDN 加速后图片处理没有效果

排查步骤:检查是否开启了 CDN 的过滤参数功能,若开启性能参数功能,回源时会去除 URL 中问号(?)之后的参数。详情请参见 CDN 过滤参数

案例:使用图片处理出现“Picture exceed the maximum allowable rotation range”报错

排查方法:
  • 可以使用 imagemagic 工具查看原图是否自带了 auto-orient 自适应旋转的属性。
  • 使用auto-orient,0 参数处理图片,可以正常处理就说明原图带了自适应旋转的属性的。

带了自适应旋转的属性后,要求图片的宽高不能超过 4096。

案例:苹果手机端携带了图片处理参数访问经过 CDN 加速的图片时变成空白图片,刷新后可以访问,电脑访问正常

问题分析:电脑端访问正常,手机端访问异常,可以判断出 OSS 是正常的,否则电脑访问也会异常。

排查步骤:
  1. 使用手机直接访问 OSS 查看图片访问是否正常。
    • 若直接访问 OSS 正常,而通过 CDN 访问异常,说明 CDN 节点网络问题导致加载失败或 CDN 缓存了错误内容。
    • 若直接访问 OSS 也异常,那么 CDN 访问应该也是异常的,若 CDN 刷新一下就正常,可能是因为 CDN 的缓存导致。
  2. 使用电脑端直接访问 OSS 查看图片访问是否正常。
    • 若电脑端访问正常,则问题出在手机端。
    • 若电脑端访问也异常,则可能是图片出问题了。

本案例中,因图片是 webp 格式,苹果手机不支持该格式。详情请参考iOS 系统无法展示 webp 格式图片问题

案例:存储在 OSS 的原图和经过图片处理后的图片都打不开

排查步骤:
  1. 下载图片。
    [root@edas02 aliyun-oss-php-sdk]# wget https://zh.mobi/test/123.jpg
    --2018-11-2210:55:16--  https://zh.mobi/test/123.jpg
    正在解析主机 zh.mobi (zh.mobi)...
    已发出 HTTP 请求,正在等待回应... 200 OK
    长度:4141232 (3.9M) [image/jpeg]
    正在保存至: “123.jpg”
    100%[========================================================================================>] 4,141,232 12.5MB/s 用时 0.3s   
    2018-11-2210:55:16 (12.5 MB/s) - 已保存 “123.jpg” [4141232/4141232])
    						
  2. 用开源工具 imagemagick 查看图片的编码构成是否有问题。
    [root@edas02 aliyun-oss-php-sdk]# identify 123.jpg 
    identify: Not a JPEG file: starts with 0x000x00 `123.jpg' @ error/jpeg.c/JPEGErrorHandler/316.
    [root@edas02 aliyun-oss-php-sdk]# 
    						

    检查发现图片编码构成有问题,并非是存储到 OSS 后出现的问题,类似问题都可以用这个工具分析。

案例:图片处理完后背景色多了一条分割线



问题分析:图片中出现的并非是分割线,而图片处理后色彩构成出现问题。原图是 RGB 的真彩色(ImageHeight": {"value": "2560" "ImageWidth": {"value": "1440" )。经过图片处理后,像素被裁剪到 h_1920,w_1080,导致 RGB 的像素点位被压缩,图片显示异常。

解决方法:使用quality,Q_100参数将图片的绝对质量提高到 100 即可。

案例:图片处理出现“BadRequest”报错



排查步骤:
  1. 使用 imagemagic 工具的 convert 命令看下原图的格式。
  2. 对比 OSS 图片处理支持的格式,确认该图片的格式是否支持。

解决方案:将图片格式转换为 OSS 支持的格式。

案例:使用图片处理出现“InvalidArgument”报错



问题分析:遇到这种参数错误,需先查看一下原图的请求参数,类似 20180899269957.jpg@0w_2e_1l_1an.src 这种请求参数的,都是历史 img-cn-xx 域名支持的格式。转换成新的 oss-cn-xxx 域名后是不支持 img 域名的请求方式的,并且老域名不支持 https 访问方式。

OSS 能否识别请求的自定义 query 参数动态缩放

目前 OSS 还无法适配这种业务需求。

一个文字水印是否可以分两行显示?一个图片是否可以添加多个文字水印?

OSS 图片水印不支持将一个文字水印分行显示,但是一个图片可以添加多个文字水印。详情请参考图片水印

为何图片经过OSS缩略之后尺寸变大了?

此问题请参考影响图片文件大小的因素