智能多媒体服务

  • 智能多媒体 > API 文档 > 图片处理 >图片高级处理(imageMogr2) >背景色填充

    背景色填充

    最近更新时间:2021-10-12 14:52:51

    简介

    imageMogr2 提供一系列高级图片处理功能,本文介绍 图片背景色填充,可与 imageMogr2 的其他参数一起使用,详细的计费说明请参见 计费与定价

    限制说明

    • 原图限制
      • 原图格式支持: psdjpegpnggifwebptiffbmp(webp动图,仅支持持久化处理)
    • 输出限制
      • 如果您有多张多帧 gif 图片需要处理,可在图片上传完成后异步进行预转,这样不必在初次访问时进行图片处理,访问速度更快。建议优先使用持久化处理
    • 同步处理
      • 同步处理只支持 20MB 以内的图片,超过 20MB 的图片需要使用持久化处理
      • 同步处理前的gif最大帧数为 200
      • 同步处理前的图片wh参数不能超过3万像素,总像素不能超过1.5亿像素
      • 同步处理后的图片wh参数不能超过9999像素,总像素不得超过24999999(2500w-1)像素
    • 持久化处理
      • 持久化处理无大小限制
      • 持久化处理前的gifwebp动图,最大帧数为 500
      • 持久化处理前的图片wh参数不能超过3万像素,总像素不能超过1.5亿像素
      • 持久化处理后的图片wh参数不能超过14999像素,总像素不得超过59999999(6000w-1)像素

    参数说明

    注意:接口规格不含任何空格与换行符。

    imageMogr2/background/<background>
              /ignore-error/<ignoreError>           
    
    参数名称 必填 说明
    /background/<background> 填充背景颜色,可以是颜色名称(比如red)或十六进制颜色(比如#FF0000)的URL安全的Base64编码。我们支持的颜色名称有transparent(#00000000)、none(#00000000)、white(#FFFFFF)、black(#000000)、red(#FF0000)、orange(#FFA500)、yellow(#FFFF00)、green(#008000)、blue(#0000FF)、purple(#800080)、gray(#7E7E7E)、pink(#FFC0CB),其中none与transparent均为透明背景色,另外十六进制颜色不区分大小写,具体颜色请参考颜色编码表。缺省背景色为white(#FFFFFF)。
    /extent/<extent> 背景颜色填充的大小和偏移,即 {size}{offset},具体参数如下:
    /ignore-error/<ignoreError> 取值为 1 时,则处理失败时返回原图;取值为 0 时,则处理失败时返回错误信息。默认值为 0。

    背景颜色填充大小&偏移参数表

    {size}{offset} 必填 说明
    /extent/<Width>x<height> 相对于原图中心位置,填充指定大小的背景颜色。
    /extent/<Width>x<height>a<dx>a<dy> 相对于原图左上角,向右偏移dx个像素,同时向下偏移dy个像素,填充指定大小的背景颜色。
    /extent/!<Width>x<height>-<dx>-<dy> 相对于原图左上角,向左偏移dx个像素,同时向上偏移dy个像素,填充指定大小的背景颜色。
    /extent/!<Width>x<height>-<dx>a<dy> 相对于原图左上角,向左偏移dx个像素,同时向下偏移dy个像素,填充指定大小的背景颜色。
    /extent/!<Width>x<height>a<dx>-<dy> 相对于原图左上角,向右偏移dx个像素,同时向上偏移dy个像素,填充指定大小的背景颜色。

    注意dxdy 取值范围不限,小于原图宽高即可。示例如下:

    • /extent/!642x492a10a10 ,表示相对原图左上角,向右偏移10,向下偏移10,填充 642x492 大小的背景颜色。
    • /extent/!642x492-10-10 ,表示相对原图左上角,向左偏移10,向上偏移10,填充 642x492大小的背景颜色。

    转义说明

    部分参数以 ! 开头,表示参数将被转义。为便于阅读,我们采用特殊转义方法,如下所示:

    p => % (percent)
    r => ^ (reverse)
    a => + (add)
    

    !50x50r 实际代表 50x50这样一个字符串。而!50x50实际代表 50x50 这样一个字符串(该字符串并不需要转义)。 <ImageSizeAndOffsetGeometry> 中的 OffsetGeometry 部分可以省略,默认为 +0+0。即 /extent/50x50 等价于 /extent/!50x50a0a0。

    示例

    • 原图

      img

    • 旋转并添加背景色:

      https://dn-odum9helk.qbox.me/resource/gogopher.jpg?imageMogr2/auto-orient/thumbnail/!256x256r/gravity/center/crop/!256x256/blur/3x9/quality/80/rotate/45/background/b3Jhbmdl
      

      img

    • 添加1像素的红色边框:

      https://dn-odum9helk.qbox.me/resource/gogopher.jpg?imageMogr2/extent/!642x429/background/cmVk
      

      img

    • 部分添加3像素的红色边框:

      https://dn-odum9helk.qbox.me/resource/gogopher.jpg?imageMogr2/extent/!642x429a1a1/background/cmVk
      

      img

    操作方式

    您可以通过 同步处理持久化处理图片样式设置CDN中间源处理 等方式,对图片进行处理,详情介绍请参见图片处理操作方式

    以上内容是否对您有帮助?
  • Qvm free helper
    Close