QQ小程序 圖像處理

圖像處理提供多種圖像處理功能，包含智能裁剪、無損壓縮、水印、格式轉(zhuǎn)換等，您可通過擴(kuò)展 SDK 輕松管理文件。

功能特性

對于有大量用戶圖片上傳的應(yīng)用，圖片處理擴(kuò)展可以為用戶提供便捷的裁剪、壓縮、水印等服務(wù)來適配各個業(yè)務(wù)場景。

前置要求

• 已經(jīng)開通云開發(fā)。
• 云環(huán)境已安裝圖像處理擴(kuò)展，點擊此處 查看安裝情況

使用說明

1.獲取圖片時處理

如果您的圖像已經(jīng)上傳到云存儲中，可通過在 url 后添加參數(shù)的方式，對圖像進(jìn)行處理，自動獲取處理后的結(jié)果。假設(shè)縮放圖片寬高為原圖50%，示例如下：

https://${您的云開發(fā)文件訪問域名，格式如：xxx.tcb.qcloud.la}/sample.jpeg?imageMogr2/thumbnail/!50p

2.持久化圖像處理

1. 安裝擴(kuò)展 SDK 到項目 npm install --save @cloudbase/extension-ci@latest

1. 注冊擴(kuò)展到Cloud對象 小程序中

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

// 初始化環(huán)境 qq.cloud.init({ env:"test-x1dzi" })

// 注冊云開發(fā)擴(kuò)展 qq.cloud.registerExtension(extCI);

云函數(shù)中
const cloud = require('qq-server-sdk');
const extCI = require('@cloudbase/extension-ci');
// 初始化環(huán)境
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})
// 注冊云開發(fā)擴(kuò)展
cloud.registerExtension(extCI);

3. 調(diào)用擴(kuò)展 SDK

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

參數(shù)說明

options參數(shù)

operations節(jié)點內(nèi)容

Rule節(jié)點內(nèi)容

返回內(nèi)容

UploadResult 節(jié)點內(nèi)容：

|參數(shù)名稱|類型|描述| |ProcessResults|Object|圖片處理結(jié)果|

ProcessResults 節(jié)點內(nèi)容：

Object 節(jié)點內(nèi)容：

調(diào)用示例

在小程序中使用

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


// 初始化環(huán)境
qq.cloud.init({
    env:"test-x1dzi"
})


// 注冊云開發(fā)擴(kuò)展
qq.cloud.registerExtension(extCI);


// 用戶選擇圖片
qq.chooseImage({
  success:res=>{
    // 使用文件管理讀取文件內(nèi)容
    const fsm = qq.getFileSystemManager();
    const filePath = res.tempFilePaths[0];
    const cloudPath = `demo.jpeg`;


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


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


        // 使用云開發(fā)擴(kuò)展能力轉(zhuǎn)換圖片格式
        qq.cloud.invokeExtension("CloudInfinite", {
          action: "ImageProcess",
          cloudPath: cloudPath, // 存儲圖像的絕對路徑，與qq.cloud.uploadFile中一致
          fileContent:fileContent, // 該字段可選，文件內(nèi)容：ArrayBuffer|Buffer。有值，表示上傳時處理圖像；為空，則處理已經(jīng)上傳的圖像
          operations: {
            rules: [
              {
                  fileid: `/image_process/demo.png`,// 處理結(jié)果的文件路徑，如以’/’開頭，則存入指定文件夾中，否則，存入原圖文件存儲的同目錄
                  rule: "imageView2/format/png" // 處理樣式參數(shù)，與下載時處理圖像在url拼接的參數(shù)一致
              }
            ]
          }
        }).then(res=>{
          console.log(res)
        })
      }
    })
  }
})

在云函數(shù)中使用

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


// 注冊云開發(fā)擴(kuò)展
cloud.registerExtension(extCI);


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


  const cloudPath = event.cloudPath;


  // 使用云開發(fā)擴(kuò)展能力生成水印
  const res = await cloud.invokeExtension("CloudInfinite", {
    action: "ImageProcess",
    cloudPath: cloudPath, // 存儲圖像的絕對路徑，與cloud.uploadFile中一致
    operations: {
      rules: [
        {
            fileid: `/image_process/${cloudPath}`,// 處理結(jié)果的文件路徑，如以’/’開頭，則存入指定文件夾中，否則，存入原圖文件存儲的同目錄
            // 處理樣式參數(shù)，與下載時處理圖像在url拼接的參數(shù)一致
            rule: "watermark/2/text/6IW-6K6v5LqRwrfkuIfosaHkvJjlm74/fill/IzNEM0QzRA/fontsize/20/dissolve/50/gravity/northeast/dx/20/dy/20/batch/1/degree/45" 
        }
      ]
    }
  })


  return {
    res
  }
}