# 图像处理

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

# 功能特性

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

类型 介绍
缩放 等比缩放、设定目标宽高缩放等多种方式
裁剪 普通裁剪、缩放裁剪、内切圆、人脸智能裁剪
旋转 普通旋转、自适应旋转
格式转换 jpg、bmp、gif、png、webp、yjpeg 格式转换,gif 格式优化,渐进显示功能
质量变换 针对 JPG 和 WEBP 图片进行质量变换
高斯模糊 对图片进行模糊处理
锐化 对图片进行锐化处理
图片水印 提供图片水印处理功能
文字水印 提供实时文字水印处理功能
获取图片基本信息 查询图片基本信息,包括格式、长、宽等
获取图片 EXIF 查询图片 EXIF 信息,如照片的拍摄参数、缩略图等
获取图片主色调 获取图片主色调信息
去除元信息 去除图片元信息,减小图像体积
快速缩略模板 快速实现图片格式转换、缩略、剪裁等功能,生成缩略图
管道操作符 对图片按顺序进行多种处理

!您不仅在云函数中可以使用该扩展能力,也可以在客户端使用,文件读写权限策略与云存储一致,减去您额外的权限管理工作。

# 前置要求

已经开通云开发。

# 扩展配置信息

您可以通过以下配置参数:

  • 环境 ID:选择要部署的环境,在哪个环境下使用。

# 计费

此扩展使用云开发或其他腾讯云服务,可能会产生相关费用:

当您使用云开发扩展时,您只需要为您使用的云资源付费;云开发与云上其他资源分开计费,您可以在 费用中心 查看具体信息。

# 启用的 API 和创建的资源

  • Type: 数据万象 Description: 为开发者提供图片、视频等多种数据的智能处理服务。
  • Type: Cloud Storage Description: 存储图片,并通过 CDN 提升图片加载速度。
  • Type: Cloud Function Description: 检测图像处理参数并为图像处理生成签名,保证操作的合法性。

# 权限授予

# 主账户

角色名称 授权策略名 角色类型 描述
CI_QCSRole QcloudAccessForCIRole、QcloudCOSDataFullControl 服务角色 数据万象(CI)会对您腾讯云资源进行访问操作,含对对象存储(COS)数据的读取、修改、删除、列出等
TCB_QcsRole QcloudCIFullAccess 服务角色 云开发(TCB)会对您的数据万象资源进行操作,方便您在扩展能力中使用该服务

# 子账户

如果想让子账户也能使用该扩展,需要为子账户授予如下权限才能使用:

  • 策略: QcloudAccessForTCBRole 描述: 云开发(TCB)对云资源的访问权限。
  • 策略: QcloudCIFullAccess 描述: 数据万象全读写访问权限。

# 安装扩展

您可以通过 云开发控制台,来安装和管理扩展。

# 使用扩展

!如果您在 web 网站使用该扩展,请先在 云开发控制台 将网站域名添加为当前环境的安全域名。

# 获取图片时处理

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

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

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

类型 参数拼接指引
缩放 参数拼接规则
裁剪 参数拼接规则
旋转 参数拼接规则
格式转换 参数拼接规则
质量变换 参数拼接规则
高斯模糊 参数拼接规则
锐化 参数拼接规则
图片水印 参数拼接规则
文字水印 参数拼接规则
获取图片基本信息 参数拼接规则
获取图片 EXIF 参数拼接规则
获取图片主色调 参数拼接规则
去除元信息 参数拼接规则
快速缩略模板 参数拼接规则
管道操作符 参数拼接规则

# 持久化图像处理

# 1. 安装扩展 SDK 到项目

npm install --save @cloudbase/extension-ci@latest

# 2. 调用扩展 SDK

调用参数

名称 类型 是否必须 说明
action String 操作类型,传:ImageProcess
cloudPath String 文件的绝对路径,与 tcb.uploadFile 中一致
fileContent Uint8Array 或 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");
const tcb = require("tcb-js-sdk");
const readFile = async function(file) {
  let reader = new FileReader();
  let res = await new Promise(resolve =&gt; {
    reader.onload = function(e) {
      let arrayBuffer = new Uint8Array(e.target.result);
      resolve(arrayBuffer);
    };
    reader.readAsArrayBuffer(file);
  });
  return res;
};
let file = document.getElementById("selectFile").files[0];
let fileContent = await readFile(file);

云函数中使用:

const extCi = require('@cloudbase/extension-ci')
const tcb = require('@cloudbase/node-sdk')
let fileContent = imageBuffer // Uint8Array|Buffer格式图像内容

您可以根据需要选择在【客户端】或【云函数】中使用,再按照如下代码调用:

const app = tcb.init({
  env: '您的环境ID'
})
app.registerExtension(extCi)

async function process() {
  try {
    const opts = {
      rules: [
        {
          // 处理结果的文件路径,如以’/’开头,则存入指定文件夹中,否则,存入原图文件存储的同目录
          fileid: '/image_process/demo.jpeg',
          rule: 'imageView2/format/png' // 处理样式参数,与下载时处理图像在url拼接的参数一致
        }
      ]
    }
    const res = await app.invokeExtension('CloudInfinite', {
      action: 'ImageProcess',
      cloudPath: 'demo.jpeg', // 存储图像的绝对路径,与tcb.uploadFile中一致
      fileContent, // 该字段可选,文件内容:Uint8Array|Buffer。有值,表示上传时处理图像;为空,则处理已经上传的图像
      operations: opts
    })
    console.log(JSON.stringify(res.data, null, 4))
  } catch (err) {
    console.log(JSON.stringify(err, null, 4))
  }
}