tencent cloud

Feedback

Basic Image Processing

Last updated: 2024-02-02 17:35:19

    Overview

    This document provides an overview of APIs and SDK code samples related to basic image processing.
    Service
    Feature
    Description
    Basic Image Processing
    Proportional scaling, scaling image to target width and height, and more
    Cut (regular cropping), crop (scaling and cropping), iradius (inscribed circle cropping), and scrop (smart cropping)
    Adaptive rotation and common rotation
    Format conversion, GIF optimization, and progressive display
    Changes the quality of images in JPG and WEBP formats
    Blurs images
    Sharpens images
    Watermarking
    Obtaining image information
    Includes EXIF data
    Performs quick format conversion, scaling, and cropping to generate thumbnails
    
    The watermark text must be URL-safe Base64-encoded, which can be done by importing js-base64.
    Sample code:
    1. Install dependencies in the project.
    npm install --save js-base64
    
    2. Import the `encode` method into the code.
    import { encode } from 'js-base64';
    
    // Text watermark content
    var text = 'Tencent Cloud CI';
    // Valid text watermark
    var safeBase64 = encode(text).replaceAll('+', '-').replaceAll('/', '_').replaceAll('=', '');
    // The following `Pic-Operations` can be used:
    'Pic-Operations': `{"is_pic_info": 1, "rules": [{"fileid": "waterMask.jpg", "rule": "watermark/2/text/${safeBase64}"}]}`

    Processing Image Upon Upload

    The following example shows how to automatically process an image when you upload it to COS.
    When the image is uploaded successfully, COS will save both the original and the processed images. You can later obtain the processing results using a general download request.

    Sample code

    <!-- 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" />
    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(file);
    };

    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

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

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

    // Generate a signed URL (effective for 30 minutes) with image processing parameters.
    cos.getObjectUrl(
    {
    Bucket: 'examplebucket-1250000000',
    Region: 'COS_REGION',
    Key: 'exampleobject',
    Query: {
    `imageMogr2/thumbnail/200x/`: ''
    },
    Expires: 1800,
    Sign: true,
    },
    function (err, data) {
    if (data) {
    // Use the browser to open the URL for preview or trigger the download
    console.log(data.URL);
    }
    },
    );
    
    // Generate an unsigned URL with image processing parameters.
    cos.getObjectUrl(
    {
    Bucket: 'examplebucket-1250000000',
    Region: 'COS_REGION',
    Key: 'exampleobject',
    Query: {
    `imageMogr2/thumbnail/200x/`: ''
    },
    Sign: false,
    },
    function (err, data) {
    if (data) {
    // Use the browser to open the URL for preview or trigger the download
    console.log(data.URL);
    }
    },
    );
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support