This topic describes how to use Image Processing (IMG). You can use any of the following methods to process an image: Add parameters to the image URL, use an image style to process various images, and use OSS SDKs.

Background information

By default, IMG does not save processed images. However, OSS allows you to add the saveas parameter to an IMG request. You can save the processed image as an object to a specified bucket. You can specify the name for the object. Then, you can access the processed image in the specified bucket. For more information, see Save processed images.

Add parameters to an image URL

To process an image, add the corresponding parameters to the end of the image URL.

  1. Log on to the OSS console.
  2. Click Buckets, and then click the name of the target bucket.
  3. Click the Files page. On the Files page that appears, click the name of the target object.
  4. In the View Details dialog box that appears, click Open File URL. The image is opened in the browser.
    Note
    • If you have applied styles to an image, you can no longer add parameters to the image URL. If you want to allow users to process images by adding parameters to the URL, in the View Details dialog box, set Image Style to None.
    • Ensure that you have write permissions on the image object. For more information about object ACL, see Configure ACL for objects.
    • When you access an image object through an unmodified URL:
      • If buckets are created before September 23, 2019, image objects accessed by using an object URL generated from an OSS domain name or a custom domain name are shown as previews in the browser.
      • If buckets are created on and after September 23, 2019, image objects that are accessed through the browser by using an object URL generated from an OSS domain name are downloaded as attachments. However, if you access the image objects through an object URL generated from a custom domain name, previews are shown in the browser.
      • Images in formats that cannot be previewed in the browser may be downloaded instead. To resolve this problem, you must install a plug-in that allows your browser to preview objects of the corresponding format.
  5. In the address bar of the browser, add IMG parameters to the end of the URL in the following format: https://bucket.<endpoint>/object?x-oss-process=image/action1,parame_value1/action2,parame_value2/....
    The URL format is described as follows:
    • http://bucket.<endpoint>/object: the original image URL in the address bar of the browser.
    • x-oss-process=image: used to introduce subsequent IMG parameters. The question mark (?) is used between x-oss-process and the original image URL. The forward slash (/) is used between image and IMG parameters.
    • action: the name of the parameter for the operation on the image. Multiple parameters are connected by a forward slash (/). Operations are performed in sequence.
    • parame: the parameter value for the operation on the image.

    For example, to rotate the test.jpg image in bucket1 90 degrees clockwise and proportionally scale the image down to 50% of its original size, you can add IMG parameters to the URL in the following format: https://bucket1.oss-cn-hangzhou.aliyuncs.com/test.jpg?x-oss-process=image/rotate,90/resize,p_50.

    https://bucket1.oss-cn-hangzhou.aliyuncs.com/test.jpg is the original image URL. rotate specifies the rotate operation on the image and resize specifies the resize operation on the image. 90 indicates the value of the rotate parameter. p_50 indicates the value of the resize parameter.

    The following table lists the topics that describe the use and description of IMG parameters.

    Operation Description Topic
    Resize an image Resize an image based on percentage or to a fixed width or height. Resize images
    Crop an image Crop an image in an ellipse. Incircle
    Crop an image by specifying a start point, and the width and height of the area to crop. Custom crop
    Define an x and y axes coordinate system for an image, and then retrieve a specific partition of the image by specifying the length and index. Indexed cut
    Crop an image in a rounded oblong shape and specify the rounded corner size. Rounded rectangle
    Rotate an image Configure whether to perform auto rotation. Adaptive orientation
    Rotate an image to a specified angle clockwise. Rotate
    Apply image effects Apply the blur effect to an image. Blur
    Adjust the brightness of an image. Brightness
    Sharpen an image. Sharpen
    Adjust the contrast of an image. Contrast
    Convert the format of an image Convert the format of an image to the specified format. Format conversion
    Perform quality transformation for a JPG or WebP image. Quality transformation
    The way to present an image. Gradual display
    Obtain image information Obtain the average color of an image. Query average colors
    Obtain the width, length, object size, format, and EXIF information of an image. Query information
    Add watermarks Add image, text, or text-and-image watermarks to an image. Add watermarks
  6. After parameters are added, press Enter. The processed image object is displayed in the browser. You can copy the image URL that includes the parameters and share it with other users. You can also download the processed image from the browser to your local device.

Use an image style to process images

To apply the same parameters to multiple images, you can create an image style to encapsulate these operations, and then use the created style to perform the same operations on multiple images.

To create an image style, perform the following steps:

  1. Log on to the OSS console.
  2. Click Buckets, and then click the name of the target bucket.
  3. In the left-side navigation pane, click Buckets. On the Buckets page that appears, click the name of the target bucket. In the left-side navigation pane, choose Data Processing > Image Processing (IMG).
  4. Click Create Style. In the Create Style dialog box that appears, click Basic Edit or Advanced Edit to create an image style.
    • Basic Edit: Create an image style in a graphical way. Set Rule Name. Configure other IMG parameters.
    • Advanced Edit: Specify IMG parameters to create an image style. Set Rule Name. In the Code field, configure IMG parameters in the following format: image/action1,parame_value1/action2,parame_value2/....
      • action: the name of the parameter for the operation on the image. Multiple parameters are connected by a forward slash (/). Operations are performed in sequence.
      • parame: the parameter value for the operation on the image.

      For more information about the use and description of IMG parameters, see Add parameters to an image URL.

  5. Click OK after you complete the configurations.
    Note For more information about how to configure and use image styles, see Image style.
  6. Click the Files page. On the Files page that appears, click the name of the target image.
  7. In the View Details dialog box that appears, select an image style from the Image Style drop-down list. The processed image is displayed in the preview window. You can click Copy File URL to obtain the URL of the processed image.

The following video shows you how to create and apply an image style.

Use OSS SDKs to process images

In addition to the preceding two methods, you can also use OSS SDKs to process the images. IMG is implemented based on GET operations. When you call GetObject, you need only to add process to process the images.

The following code provides an example on how to use OSS SDK for Python to resize an image:

bucket = oss2.Bucket(oss2.Auth(access_key_id, access_key_secret), endpoint, bucket_name)
key = 'example.jpg'
new_pic = 'new-example.jpg'
process = "image/resize,m_fixed,w_100,h_100" // Resize the image.
bucket.get_object_to_file(key, new_pic, process=process)

The following table lists the SDK demos for various programming languages.

SDK IMG topic Example
Java SDK Image processing ImageSample.java
Python SDK Image processing image.py
C# SDK IMG ImageProcessSample.cs
PHP SDK Image processing Image.php
JS SDK Image processing object.test.js
C SDK Image processing oss_image_sample.c