图像处理

图像处理提供多种图像处理功能，包含智能裁剪、无损压缩、水印、格式转换等，您可通过扩展 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("@cloudbase/js-sdk");
const readFile = async function (file) {
  let reader = new FileReader();
  let res = await new Promise((resolve) => {
    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));
  }
}

图像处理

功能特性​

前置要求​

扩展配置信息​

计费​

启用的 API 和创建的资源​

权限授予​

主账户​

子账户​

安装扩展​

使用扩展​

获取图片时处理​

持久化图像处理​

1. 安装扩展 SDK 到项目​

2. 调用扩展 SDK​