QQ小程序图像处理

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

功能特性

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

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

前置要求

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

使用说明

1.获取图片时处理

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

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

2.持久化图像处理

安装扩展 SDK 到项目 npm install --save @cloudbase/extension-ci@latest

注册扩展到Cloud对象小程序中


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

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

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



云函数中
const cloud = require('qq-server-sdk');
const extCI = require('@cloudbase/extension-ci');
// 初始化环境
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})
// 注册云开发扩展
cloud.registerExtension(extCI);

3. 调用扩展 SDK

Cloud.invokeExtension(extensionName: String, options: Object): Promise

参数说明

参数	类型	是否必须	说明
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	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)
        })
      }
    })
  }
})

在云函数中使用

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
  }
}

QQ小程序 图像处理