图像处理

最近更新时间:2020-07-03 12:02:42

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

功能特性

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

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

您不仅在云函数中可以使用该能力,也可以在客户端(web、微信小程序、QQ小程序)使用,文件读写权限策略与云存储一致,减去您额外的权限管理工作。

前置要求

已经开通云开发。

安装程序

注意:

微信小程序开发者请使用【其他登录方式】-【微信公众号登录】登录,再选择关联的小程序账户登录;QQ小程序开发者可直接通过QQ小程序开发者IDE【云开发】按钮登录,也可以通过关联的腾讯云账户登录。

您可以通过 云开发控制台,来安装和管理该能力。

使用程序

注意:

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

获取图片时处理

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

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

图像访问域名请填写云开发分配的域名,格式如:xxx.tcb.qcloud.la。

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

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

持久化图像处理

持久化图像处理只支持有结果图输出的处理操作,如获取图片基本信息、获取图片 EXIF、获取图片主色调等请通过url拼接参数获取。

1. 安装 SDK 到项目

web端及云函数中使用:

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

微信小程序中使用:

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

微信小程序中npm使用请参考 npm 支持

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 图片质量

调用示例

web端使用

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("tcb-admin-node");
let fileContent = imageBuffer; // Uint8Array|Buffer格式图像内容

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

tcb.init({
  env: "您的环境ID"
});
tcb.registerExtension(extCi);

async function process() {
  try {
    const opts = {
      rules: [
        {
          // 处理结果的文件路径,如以’/’开头,则存入指定文件夹中,否则,存入原图文件存储的同目录
          fileid: "/image_process/demo.png",
          rule: "imageView2/format/png" // 处理样式参数,与下载时处理图像在url拼接的参数一致
        }
      ]
    };
    const res = await tcb.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));
  }
}

微信小程序客户端中使用

注意:

微信小程序中关联的云开发环境需要与该程序安装的环境一致;取值参数及返回与在云函数、web端使用一致。

const extCi = require("@cloudbase/extension-ci-wxmp");
const readFile = async function() {
  let res = await new Promise(resolve=>{
      wx.chooseImage({
          success: function(res) {
              let filePath = res.tempFilePaths[0]
              let fm = wx.getFileSystemManager()
              fm.readFile({
                  filePath,
                  success(res){
                      resolve(res)
                  }
              })
          }    
      })
  })
  return res
}
let fileContent = await readFile();
async function demo() {
  const opts = {
    rules: [
      {
        // 处理结果的文件路径,如以’/’开头,则存入指定文件夹中,否则,存入原图文件存储的同目录
        fileid: "/image_process/demo.png",
        rule: "imageView2/format/png", // 处理样式参数,与下载时处理图像在url拼接的参数一致
      }
    ]
  };
  extCi.invoke({
    action: "ImageProcess",
    cloudPath: "demo.jpeg", // 图像在云存储中的路径,与tcb.uploadFile中一致
    operations: opts,
    fileContent // 可选参数
  }).then(res => {
      console.log(JSON.stringify(res.data, null, 4));
  }).catch(err => {
      console.log(JSON.stringify(err, null, 4));
  })
}

QQ小程序客户端中使用

请参考 QQ小程序扩展能力使用指引

其他

程序配置信息

您可以配置以下参数:

  • 环境 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
    描述: 数据万象全读写访问权限。
目录