文档

# 图像处理

图像处理提供多种图像处理功能，包含智能裁剪、无损压缩、水印、格式转换等，您可通过扩展 SDK 轻松管理文件。

# 功能特性

对于有大量用户图片上传的应用，图片处理扩展可以为用户提供便捷的裁剪、压缩、水印等服务来适配各个业务场景。

类型 介绍
缩放 等比缩放、设定目标宽高缩放等多种方式
裁剪 普通裁剪、缩放裁剪、内切圆、人脸智能裁剪
旋转 普通旋转、自适应旋转
格式转换 jpg、bmp、gif、png、webp、jpeg格式转换，gif 格式优化，渐进显示功能
质量变换 针对 JPG 和 WEBP 图片进行质量变换
高斯模糊 对图片进行模糊处理
锐化 对图片进行锐化处理
图片水印 提供图片水印处理功能
文字水印 提供实时文字水印处理功能
获取图片基本信息 查询图片基本信息，包括格式、长、宽等
获取图片 EXIF 查询图片 EXIF 信息，如照片的拍摄参数、缩略图等
获取图片主色调 获取图片主色调信息
去除元信息 去除图片元信息，减小图像体积
快速缩略模板 快速实现图片格式转换、缩略、剪裁等功能，生成缩略图
管道操作符 对图片按顺序进行多种处理
  • 注意：您不仅在云函数中可以使用该扩展能力，也可以在客户端使用，文件读写权限策略与云存储一致，减去您额外的权限管理工作。

# 前置要求

  1. 已经开通云开发。
  2. 云环境已安装图像处理扩展，点击此处查看安装情况

# 使用说明

# 1.获取图片时处理

如果您的图像已经上传到云存储中，可通过在 url 后添加参数的方式，对图像进行处理，自动获取处理后的结果。假设缩放图片宽高为原图50%，示例如下：

https://${您的云开发文件访问域名，格式如：xxx.tcb.qcloud.la}/sample.jpeg?imageMogr2/thumbnail/!50p

支持的图像处理特性及参数拼接格式如下所示：

类型 参数拼接指引
缩放 参数拼接规则
裁剪 参数拼接规则
旋转 参数拼接规则
格式转换 参数拼接规则
质量变换 参数拼接规则
高斯模糊 参数拼接规则
锐化 参数拼接规则
图片水印 参数拼接规则
文字水印 参数拼接规则
获取图片基本信息 参数拼接规则
获取图片 EXIF 参数拼接规则
获取图片主色调 参数拼接规则
去除元信息 参数拼接规则
快速缩略模板 参数拼接规则
管道操作符 参数拼接规则
# 2.持久化图像处理
# 1. 安装扩展 SDK 到项目
npm install --save @cloudbase/extension-ci@latest
1
# 2. 注册扩展到Cloud对象

小程序中

const extCI = require('@cloudbase/extension-ci');

// 初始化环境
qq.cloud.init({
    env:"test-x1dzi"
})

// 注册云开发扩展
qq.cloud.registerExtension(extCI);
1
2
3
4
5
6
7
8
9

云函数中

const cloud = require('qq-server-sdk');
const extCI = require('@cloudbase/extension-ci');
// 初始化环境
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})
// 注册云开发扩展
cloud.registerExtension(extCI);
1
2
3
4
5
6
7
8
# 3. 调用扩展 SDK
Cloud.invokeExtension(extensionName: String, options: Object): Promise
1

参数说明

参数 类型 是否必须 说明
extensionName String 是 扩展名，传CloudInfinite
options Object 是 扩展参数，说明见下方

options参数

名称 类型 是否必须 说明
action String 是 操作类型，传：ImageProcess
cloudPath String 是 文件的绝对路径，与cloud.uploadFile中一致
fileContent ArrayBuffer或Buffer 否 文件内容, 有值，表示上传时处理图像；为空，则处理已经上传的图像
operations Object 否 图像处理参数

operations节点内容

名称 类型 是否必须 说明
rules Array.<Rule对象> 是 处理样式

Rule节点内容

名称 类型 是否必须 说明
fileid String 是 处理结果的文件路径，如以’/’开头，则存入指定文件夹中，否则，存入原图文件存储的同目录
rule String 是 处理样式参数，与下载时处理图像在url拼接的参数一致

返回内容

参数名称 类型 描述
UploadResult Object 原图信息

UploadResult 节点内容：

参数名称 类型 描述
ProcessResults Object 图片处理结果

ProcessResults 节点内容：

节点名称 类型 描述
Object Object 每一个图片处理结果

Object 节点内容：

节点名称 类型 描述
Key String 文件名
Location String 图片路径
Format String 图片格式
Width Int 图片宽度
Height Int 图片高度
Size Int 图片大小
Quality Int 图片质量

# 调用示例

在小程序中使用

const extCI = require('@cloudbase/extension-ci');

// 初始化环境
qq.cloud.init({
    env:"test-x1dzi"
})

// 注册云开发扩展
qq.cloud.registerExtension(extCI);

// 用户选择图片
qq.chooseImage({
  success:res=>{
    // 使用文件管理读取文件内容
    const fsm = qq.getFileSystemManager();
    const filePath = res.tempFilePaths[0];
    const cloudPath = `demo.jpeg`;

    fsm.readFile({
      filePath:filePath,
      success:res2=>{

        const fileContent = res2.data; // 格式为ArrayBuffer

        // 使用云开发扩展能力转换图片格式
        qq.cloud.invokeExtension("CloudInfinite", {
          action: "ImageProcess",
          cloudPath: cloudPath, // 存储图像的绝对路径，与qq.cloud.uploadFile中一致
          fileContent:fileContent, // 该字段可选，文件内容：ArrayBuffer|Buffer。有值，表示上传时处理图像；为空，则处理已经上传的图像
          operations: {
            rules: [
              {
                  fileid: `/image_process/demo.png`,// 处理结果的文件路径，如以’/’开头，则存入指定文件夹中，否则，存入原图文件存储的同目录
                  rule: "imageView2/format/png" // 处理样式参数，与下载时处理图像在url拼接的参数一致
              }
            ]
          }
        }).then(res=>{
          console.log(res)
        })
      }
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

# 在云函数中使用

const cloud = require('qq-server-sdk');
const extCI = require('@cloudbase/extension-ci');
// 初始化环境
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

// 注册云开发扩展
cloud.registerExtension(extCI);

// 云函数入口函数
exports.main = async (event, context) => {

  const cloudPath = event.cloudPath;

  // 使用云开发扩展能力生成水印
  const res = await cloud.invokeExtension("CloudInfinite", {
    action: "ImageProcess",
    cloudPath: cloudPath, // 存储图像的绝对路径，与cloud.uploadFile中一致
    operations: {
      rules: [
        {
            fileid: `/image_process/${cloudPath}`,// 处理结果的文件路径，如以’/’开头，则存入指定文件夹中，否则，存入原图文件存储的同目录
            // 处理样式参数，与下载时处理图像在url拼接的参数一致
            rule: "watermark/2/text/6IW-6K6v5LqRwrfkuIfosaHkvJjlm74/fill/IzNEM0QzRA/fontsize/20/dissolve/50/gravity/northeast/dx/20/dy/20/batch/1/degree/45" 
        }
      ]
    }
  })

  return {
    res
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

← 图像安全审核 →