Cloud Extension

Cloud storage can integrate with CloudBase's cloud extension services to provide an integrated "storage + processing" solution. You can install corresponding extension capabilities according to actual needs to implement image processing, image tag recognition, image blind watermarking, image security audit, and other functions.

Processing Methods

CloudBase provides two image processing methods:

• URL Parameter Appending: Suitable for one-time processing, directly append processing parameters after the image URL
• Persistent Processing: Suitable for batch processing or scenarios requiring saved processing results, using SDK for processing

Method 1: URL Parameter Appending

This method is suitable for one-time image processing. No SDK installation is required, just append processing parameters after the image URL. The processed link can be used in mini programs, web pages, or as an image hosting solution.

Usage

Append processing parameters after the cloud storage image download URL or temporary link using the & symbol.

Example: Scale the image proportionally to 20% of the original

// Original image URL
https://786c-xly-xrlur-1300446086.tcb.qcloud.la/hehe.jpg?sign=b8ac757538940ead8eed4786449b4cd7&t=1591752049

// After appending scaling parameter
https://786c-xly-xrlur-1300446086.tcb.qcloud.la/hehe.jpg?sign=b8ac757538940ead8eed4786449b4cd7&t=1591752049&imageMogr2/thumbnail/!20p

Common Processing Parameters

const downloadUrl = "https://786c-xly-xrlur-1300446086.tcb.qcloud.la/hehe.jpg?sign=xxx&t=xxx";

// Proportional scaling
downloadUrl + "&imageMogr2/thumbnail/!20p"           // Scale to 20% of original
downloadUrl + "&imageMogr2/thumbnail/!50px"          // Width scaled to 50%, height unchanged
downloadUrl + "&imageMogr2/thumbnail/!x50p"          // Height scaled to 50%, width unchanged

// Specified dimensions
downloadUrl + "&imageMogr2/thumbnail/640x"           // Width 640px, height proportionally scaled
downloadUrl + "&imageMogr2/thumbnail/x355"           // Height 355px, width proportionally scaled
downloadUrl + "&imageMogr2/thumbnail/640x355"        // Limit max width and height, proportionally scaled
downloadUrl + "&imageMogr2/thumbnail/640x355r"       // Limit min width and height, proportionally scaled
downloadUrl + "&imageMogr2/thumbnail/640x355!"       // Force scale to specified dimensions (may distort)
downloadUrl + "&imageMogr2/thumbnail/150000@"        // Limit total pixels not exceeding 150000

// Cropping effects
downloadUrl + "&imageMogr2/iradius/300"              // Inscribed circle crop, radius 300px
downloadUrl + "&imageMogr2/rradius/100"              // Rounded corner crop, radius 100px

// Other effects
downloadUrl + "&imageMogr2/rotate/90"                // Rotate 90 degrees clockwise
downloadUrl + "&imageMogr2/format/png"               // Convert to PNG format
downloadUrl + "&imageMogr2/blur/8x5"                 // Gaussian blur (radius 8, sigma 5)

// Get image information
downloadUrl + "&imageInfo"                           // Return basic image information (JSON format)

💡 Tips:

• p in parameters represents percentage, x represents pixel value
• Multiple processing parameters can be combined using the | separator
• For more parameter descriptions, please refer to Image Processing Documentation

Method 2: Persistent Image Processing

This method is suitable for scenarios requiring batch processing or saving processing results, calling cloud extension capabilities through SDK.

Install Extension SDK

Web

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

WeChat Mini Program

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

Node.js

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

⚠️ WeChat Mini Program Notes:

• Need to add the image processing domain *.pic.ap-shanghai.myqcloud.com to the mini program's request whitelist
• Configuration path: WeChat Public Platform > Development > Development Management > Development Settings > Server Domain Names

Code Examples

Web

import tcb from 'tcb-js-sdk';
import extCi from '@cloudbase/extension-ci';

// Initialize SDK
const app = tcb.init({
  env: 'your-env-id'
});

// Register extension
tcb.registerExtension(extCi);

// Read file content
const readFile = (file) => {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const arrayBuffer = new Uint8Array(e.target.result);
      resolve(arrayBuffer);
    };
    reader.readAsArrayBuffer(file);
  });
};

// Process image
async function processImage() {
  try {
    // Get user-selected file
    const file = document.getElementById('selectFile').files[0];
    const fileContent = await readFile(file);
    
    // Call image processing extension
    const result = await app.invokeExtension('CloudInfinite', {
      action: 'ImageProcess',                    // Operation type: ImageProcess
      cloudPath: 'processed/demo.png',           // Saved path after processing
      fileContent: fileContent,                  // File content
      operations: {
        rules: [
          {
            fileid: '/processed/demo.png',       // Output file path
            rule: 'imageMogr2/format/png'        // Processing rule: convert to PNG
          }
        ]
      }
    });
    
    console.log('Processing result:', result);
    return result;
  } catch (err) {
    console.error('Image processing failed:', err);
    throw err;
  }
}

WeChat Mini Program

import extCi from '@cloudbase/extension-ci-wxmp';

// Initialize CloudBase
wx.cloud.init({
  env: 'your-env-id'
});

// Register extension
wx.cloud.registerExtension(extCi);

// Process image
async function processImage() {
  try {
    // Select image
    const { tempFilePaths } = await wx.chooseImage({
      count: 1,
      sizeType: ['original']
    });
    
    // Upload file to cloud storage
    const uploadResult = await wx.cloud.uploadFile({
      cloudPath: `temp/${Date.now()}.jpg`,
      filePath: tempFilePaths[0]
    });
    
    // Call image processing extension
    const result = await wx.cloud.invokeExtension('CloudInfinite', {
      action: 'ImageProcess',                    // Operation type
      cloudPath: uploadResult.fileID,            // Source file ID
      operations: {
        rules: [
          {
            fileid: '/processed/demo.png',       // Output file path
            rule: 'imageMogr2/format/png|imageMogr2/thumbnail/!50p'  // Convert to PNG and scale
          }
        ]
      }
    });
    
    console.log('Processing result:', result);
    return result;
  } catch (err) {
    console.error('Image processing failed:', err);
    wx.showToast({
      title: 'Processing failed',
      icon: 'none'
    });
  }
}

Node.js

const tcb = require('@cloudbase/node-sdk');
const extCi = require('@cloudbase/extension-ci');
const fs = require('fs');

// Initialize SDK
const app = tcb.init({
  env: 'your-env-id'
});

// Register extension
tcb.registerExtension(extCi);

// Process image
async function processImage() {
  try {
    // Read local file
    const fileContent = fs.readFileSync('./demo.jpg');
    
    // Call image processing extension
    const result = await app.invokeExtension('CloudInfinite', {
      action: 'ImageProcess',                    // Operation type
      cloudPath: 'demo.jpg',                     // Source file path
      fileContent: fileContent,                  // File content
      operations: {
        rules: [
          {
            fileid: '/processed/demo.png',       // Output file path
            rule: 'imageMogr2/format/png'        // Processing rule
          }
        ]
      }
    });
    
    console.log('Processing result:', result);
    return result;
  } catch (err) {
    console.error('Image processing failed:', err);
    throw err;
  }
}

// Execute processing
processImage();

Parameter Description

Parameter	Type	Required	Description
action	String	Yes	Operation type. Options: - ImageProcess: Image processing - DetectType: Image security audit - WaterMark: Image blind watermark - DetectLabel: Image tag recognition
cloudPath	String	Yes	File path or file ID in cloud storage
fileContent	Buffer/Uint8Array	No	File content (required when uploading new files)
operations	Object	Yes	Processing parameters, see format description below

operations Object Structure:

{
  rules: [
    {
      fileid: '/output/path.png',      // Output file path
      rule: 'imageMogr2/format/png'    // Processing rule (same as URL parameter appending)
    }
  ]
}

Common Error Handling

async function processImageWithErrorHandling() {
  try {
    const result = await app.invokeExtension('CloudInfinite', {
      // ... parameter configuration
    });
    return result;
  } catch (err) {
    // Handle common errors
    if (err.code === 'RESOURCE_NOT_FOUND') {
      console.error('Source file does not exist, please check cloudPath parameter');
    } else if (err.code === 'PERMISSION_DENIED') {
      console.error('Insufficient permissions, please check security rules configuration');
    } else if (err.code === 'EXTENSION_NOT_INSTALLED') {
      console.error('Image processing extension not installed, please install in CloudBase console');
    } else {
      console.error('Image processing failed:', err.message);
    }
    throw err;
  }
}

Related Documentation

• Image Processing Extension Documentation