Overview

This document provides an overview of APIs and SDK code samples related to basic image processing.

Processing an Image upon the Upload

The following example shows how to automatically process an image when you upload it to COS.

Upon successful upload, COS will save both the original and processed images. You can obtain the processing result using a common download request.

Sample code

html
<!-- DOM element in the HTLM file -->
<!-- Choose an image to upload -->
<input id="fileSelector" type="file" />
<!-- Click the button to upload the image -->
<input id="submitBtn" type="submit" />

javascript
function handleFileInUploading(file) {
cos.putObject(
  {
    Bucket: 'examplebucket-1250000000',
    Region: 'COS_REGION',
    Key: file.name,
    Body: file,
    Headers: {
      // Use the imageMogr2 API to scale the image (specifying the width of the output image to 200, with the height scaled automatically).
      'Pic-Operations':
        '{"is_pic_info": 1, "rules": [{"fileid": "desample_photo.jpg", "rule": "imageMogr2/thumbnail/200x/"}]}',
    },
  },
  function (err, data) {
    console.log(err || data);
  },
);
}
document.getElementById('submitBtn').onclick = function (e) {
var file = document.getElementById('fileSelector').files[0];
if (!file) {
  document.getElementById('msg').innerText = 'File to upload not selected';
  return;
}
handleFileInUploading();
};

Processing an In-Cloud Image

The following example shows how to process an in-cloud image and store the processing result in COS.

Sample code

html
<!-- DOM element in the HTLM file -->
<!-- Click the button to process the in-cloud image -->
<input id="submitBtn" type="submit" />

javascript
function handleFileInBucket() {
cos.request(
  {
    Bucket: 'examplebucket-1250000000',
    Region: 'COS_REGION',
    Key: 'exampleImage',
    Method: 'POST',
    Action: 'image_process',
    Headers: {
      // Use the imageMogr2 API to scale the image (specifying the width of the output image to 200, with the height scaled automatically).
      'Pic-Operations':
        '{"is_pic_info": 1, "rules": [{"fileid": "desample_photo.jpg", "rule": "imageMogr2/thumbnail/200x/"}]}',
    },
  },
  function (err, data) {
    console.log(err || data);
  },
);
}
document.getElementById('submitBtn').onclick = function (e) {
handleFileInBucket();
};

Processing an Image upon the Download

The following sample shows how to process an image upon the download:

Sample code

html
<!-- DOM element in the HTLM file -->
<!-- Click the button to download and process the image -->
<input id="submitBtn" type="submit" />

javascript
function getObject() {
cos.getObject(
  {
    Bucket: 'examplebucket-1250000000',
    Region: 'COS_REGION',
    Key: 'exampleobject',
    QueryString: `imageMogr2/thumbnail/200x/`,
  },
  function (err, data) {
    console.log(err || data);
  },
);
}

Generating a Signed URL with Image Processing Parameters

Sample code

javascript
// Generate a signed URL (effective for 30 minutes) with image processing parameters.
cos.getObjectUrl(
{
  Bucket: 'examplebucket-1250000000',
  Region: 'COS_REGION',
  Key: 'exampleobject',
  QueryString: `imageMogr2/thumbnail/200x/`,
  Expires: 1800,
  Sign: true,
},
function (err, data) {
  if (data) {
    console.log(data.URL);
  }
},
);
// Generate an unsigned URL with image processing parameters.
cos.getObjectUrl(
{
  Bucket: 'examplebucket-1250000000',
  Region: 'COS_REGION',
  Key: 'exampleobject',
  QueryString: `imageMogr2/thumbnail/200x/`,
  Sign: false,
},
function (err, data) {
  if (data) {
    console.log(data.URL);
  }
},
);