Image Processing

Image Processing provides multiple image processing functions, including intelligent cropping, lossless compression, watermarking, format conversion, etc. You can easily manage files through the extended SDK.

Features

For applications with a large number of user image uploads, the image processing extension can provide users with convenient services such as cropping, compression, watermarking, etc., to adapt to various business scenarios.

Type	Description
Scaling	Proportional scaling, target width/height scaling, and various other methods
Cropping	Regular cropping, scaled cropping, inscribed circle, intelligent face cropping
Rotation	Regular rotation, adaptive rotation
Format conversion	jpg, bmp, gif, png, webp, yjpeg format conversion, GIF format optimization, progressive display
Quality adjustment	Adjusts the quality for JPG and WEBP images
Gaussian blur	Applies blur processing to images
Sharpening	Applies sharpening processing to images
Image watermarking	Provides image watermarking processing functionality
Text watermarking	Provides real-time text watermarking processing functionality
Get basic image information	Queries basic image information including format, height, width, etc.
Get image EXIF	Queries image EXIF information, such as photo shooting parameters, thumbnails, etc.
Get image dominant color	Obtains the dominant color information of images
Remove metadata	Removes image metadata to reduce image size
Quick thumbnail template	Quickly implements image format conversion, thumbnail generation, cropping, and other functions to generate thumbnails
Pipeline operator	Applies multiple processing steps to images sequentially

!You can use this extension capability not only in Cloud Functions but also on the client side. The file read-write permission policies are consistent with Cloud Storage, reducing your additional permission management efforts.

Prerequisites

CloudBase has been provisioned.

Extension Configuration Information

You can configure the following parameters:

Environment ID: Select the environment to deploy to, specifying where it will be used.

Billing

This extension uses CloudBase or other Tencent Cloud services, which may incur relevant fees:

Cloud Infinite (Product Pricing and Usage Details).
Cloud Storage (Product Pricing and Usage Details).
Cloud Function (Product Pricing and Usage Details).

When using CloudBase extensions, you only pay for the cloud resources you consume; CloudBase is billed separately from other cloud resources. You can view detailed information in the Billing Center.

Enabled APIs and Created Resources

Type: Cloud Infinite Description: Provides developers with intelligent processing services for images, videos, and other types of data.
Type: Cloud Storage Description: Storing images and improving their loading speed via CDN.
Type: Cloud Function Description: Detects image processing parameters and generates signatures for image processing to ensure the legitimacy of operations.

Permission Granting

Primary Account

Role Name	Authorization Policy Name	Role Type	Description
CI_QCSRole	QcloudAccessForCIRole, QcloudCOSDataFullControl	Service Role	Cloud Infinite (CI) will access your Tencent Cloud resources, including reading, modifying, deleting, listing, etc. of COS data.
TCB_QcsRole	QcloudCIFullAccess	Service Role	CloudBase (TCB) will operate on your Cloud Infinite (CI) resources to facilitate your use of this service in extension capabilities.

Sub-account

If you want a sub-account to be able to use this extension, you need to grant the following permissions to the sub-account:

Policy: QcloudAccessForTCBRole Description: Access permissions for CloudBase (TCB) to cloud resources.
Policy: QcloudCIFullAccess Description: Full read-write access permissions for Cloud Infinite (CI).

Install Extension

You can install and manage extensions via the CloudBase Console.

Use Extension

! If you use this extension on a web website, first add the website domain as a security domain for the current environment in the CloudBase Console.

Process During Image Retrieval

If your images are already uploaded to cloud storage, you can process them by adding parameters to the url and automatically obtain the processed results. For example, to scale the image to 50% of its original dimensions:

https://${your CloudBase file access domain, format: xxx.tcb.qcloud.la}/sample.jpeg?imageMogr2/thumbnail/!50p

The supported image processing features and parameter concatenation formats are as follows:

Type	Parameter Concatenation Guide
Scaling	Parameter Concatenation Rules
Cropping	Parameter Concatenation Rules
Rotation	Parameter Concatenation Rules
Format Conversion	Parameter Concatenation Rules
Quality Transformation	Parameter Concatenation Rules
Gaussian Blur	Parameter Concatenation Rules
Sharpening	Parameter Concatenation Rules
Image Watermark	Parameter Concatenation Rules
Text Watermark	Parameter Concatenation Rules
Get Image Basic Information	Parameter Concatenation Rules
Get Image EXIF	Parameter Concatenation Rules
Get Image Dominant Color	Parameter Concatenation Rules
Strip Metadata	Parameter Concatenation Rules
Quick Thumbnail Template	Parameter Concatenation Rules
Pipe Operator	Parameter Concatenation Rules

Persistent Image Processing

1. Install the extension SDK to your project

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

2. Invoke the extension SDK

Invocation Parameters

Name	Type	Required	Description
action	String	Yes	Operation type, pass: ImageProcess
cloudPath	String	Yes	Absolute path of the file, same as in tcb.uploadFile
fileContent	Uint8Array or Buffer	No	File content. If provided, processes the image during upload; if empty, processes an already uploaded image.
operations	Object	No	Image processing parameters

operations node content

Name	Type	Required	Description
rules	Array.<Rule object>	Yes	Processing style

Rule node content

Name	Type	Required	Description
fileid	String	Yes	File path of the processed result. If starting with '/', saves to specified folder; otherwise saves to same directory as original image file.
rule	String	Yes	Processing style parameter, consistent with the parameters concatenated in the url for image processing during download.

Response

Parameter Name	Type	Description
UploadResult	Object	Original image information

UploadResult node content:

Parameter Name	Type	Description
ProcessResults	Object	Image processing results

ProcessResults node content:

Node Name	Type	Description
Object	Object	Each image processing result

Object node content:

Node Name	Type	Description
Key	String	File name
Location	String	Image path
Format	String	Image format
Width	Int	Image width
Height	Int	Image height
Size	Int	Image size
Quality	Int	Image quality

Invoke Example

Client Usage:

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);

Usage in Cloud Functions:

const extCi = require("@cloudbase/extension-ci");
const tcb = require("@cloudbase/node-sdk");
let fileContent = imageBuffer; // Uint8Array|Buffer format image content

You can choose to use it in [client] or [cloud functions] as needed, and then invoke it with the following code:

const app = tcb.init({
  env: "Your Environment ID"
});
app.registerExtension(extCi);

async function process() {
  try {
    const opts = {
      rules: [
        {
          // File path of the processed result. If starting with '/', saves to specified folder; otherwise saves to same directory as original image file.
          fileid: "/image_process/demo.jpeg",
          rule: "imageView2/format/png" // Processing style parameter, consistent with the parameters concatenated in the url for image processing during download.
        }
      ]
    };
    const res = await app.invokeExtension("CloudInfinite", {
      action: "ImageProcess",
      cloudPath: "demo.jpeg", // Absolute path of the stored image, same as in tcb.uploadFile
      fileContent, // This field is optional. File content: Uint8Array|Buffer. If provided, processes the image during upload; if empty, processes an already uploaded image.
      operations: opts
    });
    console.log(JSON.stringify(res.data, null, 4));
  } catch (err) {
    console.log(JSON.stringify(err, null, 4));
  }
}

Image Processing

Features​

Prerequisites​

Extension Configuration Information​

Billing​

Enabled APIs and Created Resources​

Permission Granting​

Primary Account​

Sub-account​

Install Extension​

Use Extension​

Process During Image Retrieval​

Persistent Image Processing​

1. Install the extension SDK to your project​

2. Invoke the extension SDK​