Help Center> Object Storage Service> BrowserJS> Object Download> Processing an Image
Updated on 2024-04-26 GMT+08:00
View PDF

Processing an Image

If you have any questions during development, post them on the Issues page of GitHub. For details about parameters and usage of each API, see the API Reference.

OBS can be used to process images in a stable, secure, efficient, easy to use, and cost-efficient manner. If the object to be downloaded is an image, you can pass the image processing parameters to process the image, including cutting and resizing it as well as putting a watermark and converting the format.

For more information, see Image Processing Feature Guide.

Sample code: 
// Create an ObsClient instance.
var obsClient = new ObsClient({
    // Hard-coded or plaintext AK/SK are risky. For security purposes, encrypt your AK/SK and store them in the configuration file or environment variables. In this example, the AK/SK are stored in environment variables for identity authentication. Before running this example, configure environment variables AccessKeyID and SecretAccessKey.
    // The front-end code does not have the process environment variable, so you need to use a module bundler like webpack to define the process variable.
    // Obtain an AK/SK pair on the management console. For details, see https://support.huaweicloud.com/intl/en-us/usermanual-ca/ca_01_0003.html.
    access_key_id: process.env.AccessKeyID,
    secret_access_key: process.env.SecretAccessKey,
    // Replace the example endpoint with the actual one in your case.
    server: 'https://obs.ap-southeast-1.myhuaweicloud.com'
});

obsClient.getObject({
       Bucket: 'bucketname',
       Key: 'objectname.jpg',
       // ImageProcess: 'image/resize,m_fixed,w_100,h_100',        // Forcibly fix the width and height of the image to 100.
       // ImageProcess: 'image/rotate,90',                         // Set the image rotation angle to 90.
       ImageProcess: 'image/resize,m_fixed,w_100,h_100/rotate,90', // Forcibly fix the width and height of the image to 100, and then set the rotation angle to 90.
}, function (err, result) {
       if(err){
              console.error('Error-->' + err);
       }else{
              console.log('Status-->' + result.CommonMsg.Status);
       }
});

For more image processing functions, see Image Processing Function Overview.

  • Use the ImageProcess parameter to specify the image processing parameters.
  • Image processing parameters can be processed in cascading mode. This indicates that multiple commands can be performed on an image in sequence.
Parent topic: Object Download