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

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

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

![img](https://res.wx.qq.com/op_res/ZL5lRWER4ILPDYHBD_x3e3z20kFLA99JwhnjPesEexJ7SbPxGpQHRJHqDTrpgA4OxURz_l6CV4Uonu4bZsTX6w)

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

## 使用样式
完成样式配置后，可参考如下代码，在小程序端使用云存储中的图片时，应用样式进行处理
```js
wx.cloud.getTempFileURL({
  fileList: [{
    fileID: 'a7xzcb', // 图片文件ID
  }],

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