Help Center> Object Storage Service> Image Processing> Start to Process (Using OBS Console)> Applying Image Styles
Updated on 2024-03-04 GMT+08:00
View PDF

Applying Image Styles

When a created image style exists in a bucket, use either of the following methods to apply the image style:

  • Copying Link: On OBS console, obtain the image URL when previewing the image on the details page. Enter the URL in the address bar of a browser, and you can obtain the processed image. Copying Links shows the procedure in detail.
  • Concatenating domain names: Concatenate a domain name by referring to the following rule, enter it in the address bar of a browser, and obtain the processed image.
    <Image URL>?x-image-process=style/<Style name>

    The image URL can be obtained from the object details page. For details, see Editing Domain Names. The style name is the one defined when the style was created. A style name can contain only uppercase or lowercase letters, digits, periods (.), underscores (_), and hyphens (-) and is 1 to 256 characters long, for example, rotate_0001.

Copying Links

  1. On the console homepage, click Service List in the upper left corner and choose Storage > Object Storage Service.
  2. Click the name of the bucket that houses the desired style. The Objects page is displayed.
  3. Click the name of an existing image or of a newly uploaded image. The details page is displayed.
  4. Click the Preview Image tab to preview the effect of the current style. For details, see Figure 1.

    Figure 1 Preview Image

  5. Click Copy Link. After prompted with Copied successfully, you can obtain the address of the image that uses styles and then access the image in the browser.

Editing Domain Names

  1. On the OBS object list page, click an image to be processed. The image details page is displayed.
  2. Choose Object ACL > User Access > Anonymous User and click Edit. In the displayed dialog box, grant the object read permission to anonymous users and click OK. For details, see Figure 2.

    Figure 2 Granting the object read permission to anonymous users

  3. Click the icon next to the link to copy the image URL.
  4. Add ?x-image-process=style/<Style name> behind the copied URL. Enter it in the address bar of a browser, and then you can access the processed image.

    Example:

    https://bucketname.obs.ap-southeast-1.myhuaweicloud.com/example.jpg?x-image-process=style/stylename

    The preceding image links and styles are examples for reference only. Change accordingly in practice.