# 图片处理

云开发支持对于存储在云存储中的图片进行缩放、裁剪等处理操作。无需修改原始图片文件,可在小程序前端调用该图片时进行实时处理操作。

# 添加样式

进入云开发控制台,点击“存储”-“图片处理”-“添加样式”,即可创建图片处理样式,后续可直接应用该样式对图片进行处理。
注:

  • 当前内容安全功能为免费使用,后续可能进行收费,若要收费将会进行全面的通知;
  • 图片处理仅支持按量计费环境使用,预付费环境可在切换为按量计费后进行使用

img

# 样式配置

  • 输入样式名称:后续通过样式名称对图片进行应用样式处理操作
  • 缩略方式:支持缩放、剪裁、缩放+剪裁
  • 缩放选择:支持等比缩放、限定宽高缩放
  • 缩放尺寸:根据像素值进行缩放
  • 裁剪位置:支持根据九宫格位置进行锚点裁剪图片
  • 渐近显示:开启后,在加载过程中先显示整个图片的模糊轮廓,然后逐渐加载直至显示完整的图片
  • 输出格式:可选择图片格式
  • 预览效果:可根据右侧的默认图片实时查看当前样式配置应用后的效果 img

# 使用样式

完成样式配置后,可参考如下代码,在小程序端使用云存储中的图片时,应用样式进行处理

wx.cloud.getTempFileURL({
  fileList: [{
    fileID: 'a7xzcb', // 图片文件ID
  }],
  
  success: res => {
    const url = res.fileList[0].tempFileURL // 获取图片链接
    const styleName = 'test' // 通过云开发控制台获取样式名称
    this.setData({
      src: `${url}/${styleName}` // 将样式名称拼接至图片链接后,应用对应样式
    })
  }
})