Skip to main content

Cloud Call Extension

Cloud Storage can interact with the Cloud Call Extension service provided by Cloud Development, offering an integrated "storage + processing" solution. You can install the corresponding cloud call capabilities of Cloud Development based on your actual needs, such as image processing, image labeling, image blind watermarking, and image security review.

You can process images in the following two ways: appending parameters to the image URL for one-time processing, and persistent image processing on the client and cloud function sides.

Image URL Parameters​

After installing the image processing extension capability, you can directly append parameters to the Cloud Storage https link (download URL or temporary URL). The concatenated URL can be used in Mini Programs, Web pages, or for image hosting. For example, the original image download URL is:

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

By appending the parameter &imageMogr2/thumbnail/!20p to the download URL, you can proportionally scale the image down to 20% of its original size.

//Scale the image down proportionally to 20% of its original size
https://786c-xly-xrlur-1300446086.tcb.qcloud.la/hehe.jpg?sign=b8ac757538940ead8eed4786449b4cd7&t=1591752049&imageMogr2/thumbnail/!20p

More examples:

const download_url = "https://786c-xly-xrlur-1300446086.tcb.qcloud.la/hehe.jpg?sign=b8ac757538940ead8eed4786449b4cd7&t=1591752049"
//Scale the width to 50% of the original image while keeping the height unchanged
download_url&imageMogr2/thumbnail/!50px

//Scale the height to 50% of the original image while keeping the width unchanged
download_url&imageMogr2/thumbnail/!x50p

//Specify the target image width (in px) and proportionally compress the height. Note: In the concatenation, 'p' and 'x' represent different meanings.
download_url&imageMogr2/thumbnail/640x

//Specify the target image height (in px) and proportionally compress the width
download_url&imageMogr2/thumbnail/x355

//Constrain the maximum width and height of the thumbnail to Width and Height respectively, while maintaining the aspect ratio
download_url&imageMogr2/thumbnail/640x355

//Constrain the minimum width and height of the thumbnail to Width and Height respectively, while maintaining the aspect ratio
download_url&imageMogr2/thumbnail/640x355r

//Ignore the original image aspect ratio, specify the image width as Width and height as Height, forcibly scale the image, which may cause distortion in the target image
download_url&imageMogr2/thumbnail/640x355!

//Scale the image proportionally, ensuring the total number of pixels does not exceed Area
download_url&imageMogr2/thumbnail/150000@

//Set the radius to 300 and perform inscribed circle cropping
download_url&imageMogr2/iradius/300

//Set the radius to 100px and perform rounded corner cropping
download_url&imageMogr2/rradius/100

//Rotate 90 degrees clockwise
download_url&imageMogr2/rotate/90

//Convert the original image from jpg format to png format
download_url&imageMogr2/format/png

//Set the blur radius to 8 and sigma value to 5, then perform Gaussian blur processing
download_url&imageMogr2/blur/8x5

//Get the basic image information, returned in json format. You can use an https request to view the image's format, width, height, size, and dominant color (photo_rgb)
download_url&imageInfo

Persistent Image Processing​

Install the extension SDK to your project

//Web end, admin console, cloud function environment, etc. need to install cloudbase/extension-ci to the project
npm install --save @cloudbase/extension-ci@latest

//WeChat Mini Program needs to install cloudbase/extension-ci-wxmp to the project
npm install --save @cloudbase/extension-ci-wxmp@latest
  • Your developer tools may report the following error: https://786c-xly-xrlur-1300446086.pic.ap-shanghai.myqcloud.com is not in the request legal domain list. Please refer to the documentation: https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html. You need to add the link to the legal domain list according to the documentation; otherwise, the image will not be generated;
  • action is the operation type, and its value can be: ImageProcess for image processing, DetectType for image security audit, WaterMark for blind watermarking, DetectLabel for image labeling, etc.;
  • operations is the image processing parameter.

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

References​

For more details, refer to:

Cloud Call Extension Capabilities