# 图片处理
云开发支持对于存储在云存储中的图片进行缩放、裁剪等处理操作。无需修改原始图片文件,可在小程序前端调用该图片时进行实时处理操作。
# 添加样式
进入云开发控制台,点击“存储”-“图片处理”-“添加样式”,即可创建图片处理样式,后续可直接应用该样式对图片进行处理。
注:
- 当前内容安全功能为免费使用,后续可能进行收费,若要收费将会进行全面的通知;
- 图片处理仅支持按量计费环境使用,预付费环境可在切换为按量计费后进行使用
# 样式配置
- 输入样式名称:后续通过样式名称对图片进行应用样式处理操作
- 缩略方式:支持缩放、剪裁、缩放+剪裁
- 缩放选择:支持等比缩放、限定宽高缩放
- 缩放尺寸:根据像素值进行缩放
- 裁剪位置:支持根据九宫格位置进行锚点裁剪图片
- 渐近显示:开启后,在加载过程中先显示整个图片的模糊轮廓,然后逐渐加载直至显示完整的图片
- 输出格式:可选择图片格式
- 预览效果:可根据右侧的默认图片实时查看当前样式配置应用后的效果
# 使用样式
完成样式配置后,可参考如下代码,在小程序端使用云存储中的图片时,应用样式进行处理
wx.cloud.getTempFileURL({
fileList: [{
fileID: 'a7xzcb', // 图片文件ID
}],
success: res => {
const url = res.fileList[0].tempFileURL // 获取图片链接
const styleName = 'test' // 通过云开发控制台获取样式名称
this.setData({
src: `${url}/${styleName}` // 将样式名称拼接至图片链接后,应用对应样式
})
}
})