Basic Image Processing

Last updated: 2021-06-09 14:19:54

    Overview

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

    Service Feature Description
    Basic image processing service Scaling Proportional scaling, scaling image to target width and height, and more
    Cropping Cut (regular cropping), crop (scaling and cropping), iradius (inscribed circle cropping), and scrop (smart cropping)
    Rotation Adaptive rotation and common rotation
    Format conversion Format conversion, GIF optimization, and progressive display
    Quality conversion Changes the quality of images in JPG and WEBP formats
    Gaussian blur Blurs images
    Sharpening Sharpens images
    Watermarking Image watermarks, text watermarks
    Obtaining image information Basic information, EXIF data, average hue
    Removing metadata Includes EXIF data
    Quick thumbnail template Performs quick format conversion, scaling, and cropping to generate thumbnails

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