Updated on 2024-10-24 GMT+08:00

Resizing Images

You can use the GUI or code mode on OBS Console or make an API call to resize images. Images can be resized based on a specific rule or a fixed width, height, or percentage.

  • A long side refers to the side with a larger ratio of its original size to its target size, and a short side refers to the side with a smaller ratio. Assume that the original size of an image is 400 × 200 pixels and it is resized to 100 × 100 pixels. The ratio of 400 pixels to 100 pixels is 4 and that of 200 pixels to 100 pixels is 2, so the long side is 400 pixels and the short side is 200 pixels.
  • For a target image after resizing, its long side cannot exceed 9,999 pixels, and the product of its width and height cannot exceed 24,999,999 pixels.
  • If you only specify the height or width for resizing, the target image keeps the same aspect ratio and format as the original image.
  • By default, resizing is not allowed to scale up an image. If you want an image to become larger after resizing, you need to set limit to 0 to obtain the enlarged image, or the original image will be returned. To do this, use the following format:

    https://hw-image-demo.obs.ap-southeast-1.myhuaweicloud.com/example.jpg?x-image-process=image/resize,w_500,limit_0

Table 1 describes the parameters.

This operation is represented by resize.

Table 1 Resizing parameters

Parameter

Value Description

Code Example

m

Type of resizing. The value can be lfit (the default value), mfit, fill, pad, or fixed.

  • lfit: Specify a rectangle with a given width (indicated by w) and height (indicated by h), lock the aspect ratio, and obtain the largest image in the rectangle.
  • mfit: Specify a rectangle with a given width (indicated by w) and height (indicated by h), lock the aspect ratio, and obtain the smallest image in the rectangle's extended area.
  • fill: Specify a rectangle with a given width (indicated by w) and height (indicated by h) and lock the aspect ratio. Obtain the smallest image in the rectangle's extended area, and center and crop the image. fill-based resizing actually centers and crops a target image resized with mfit.
  • pad: Specify a rectangle with a given width (indicated by w) and height (indicated by h) and lock the aspect ratio. Obtain the largest image in the rectangle and fill the blank area with color. pad-based resizing actually fills the blank area of a target image resized with lfit.
  • fixed: Resize an image based on a fixed width and height.
  • ratio: Specify an aspect ratio (a ratio of w to h), in the range of 1 to 1000, and obtain the largest image that meets the specified ratio.

image/resize,m_lfit,h_100,w_100

p

Percentage of the aspect ratio, in the range of 1 to 1000. If the value is:

  • < 100: The image is scaled down.
  • = 100: The image is kept unchanged in size.
  • > 100: The image is scaled up.

image/resize,p_50

h

Height of the target image, in the range of 1 to 9999. The product of the target image's width and height cannot exceed 24,999,999.

image/resize,m_lfit,h_100

w

Width of the target image, in the range of 1 to 9999. The product of the target image's width and height cannot exceed 24,999,999.

image/resize,m_fixed,h_100,w_100

l

The long side of the target image, in the range of 1 to 4096. The product of the target image's width and height cannot exceed 24,999,999.

The long side has a specified value, and the short side is scaled based on the ratio.

image/resize,l_100

s

The short side of the target image, in the range of 1 to 4096. The product of the target image's width and height cannot exceed 24,999,999.

The short side has a specified value, and the long side is scaled based on the ratio.

image/resize,s_100

color

Color for filling the blank area after resizing. This parameter can be used when you set m to pad.

The value is a hexadecimal code, from 000000 to FFFFFF (default value, representing white).

image/resize,m_pad,h_100,w_100,color_FF0000

limit

Whether to limit the size of the target image when the target image is larger than the original one. The value can be 0 or 1 (default value).

  • 0: The size is not limited.
  • 1: The size is limited.

image/resize,p_150,limit_0

If a resized image is aliased, you can add /marker,u_plus to the end of the image processing URL for optimization.

For example, the image processing URL is as follows:

https://hw-image-demo.obs.ap-southeast-1.myhuaweicloud.com/example.jpg?x-image-process=image/resize,m_fixed,w_2668,h_1999,limit_0

After the parameter is added, the link is as follows:

https://hw-image-demo.obs.ap-southeast-1.myhuaweicloud.com/example.jpg?x-image-process=image/resize,m_fixed,w_2668,h_1999,limit_0/marker,u_plus

Examples

Resizing an Image by Editing Code on OBS Console

  1. On the console homepage, click Service List in the upper left corner and choose Storage > Object Storage Service.
  2. In the bucket list, click the bucket you want to go to the Objects page.
  3. Click Upload Object to open the Upload Object dialog box.
  4. Click add files marked by red box in Figure 1 to open the local file browser.

    Figure 1 Uploading an image

  5. Select the image that you want to upload and click Open.
  6. Click Upload to upload the image. The uploaded image is displayed in the object list.
  7. In the navigation pane, choose Data Processing > Image Processing.
  8. Click Create to go to the style editing page.
  9. Set Style Name to style002 and choose Code for Edit Mode.
  10. In the code input box, type the following command for resizing.

    Specify a rectangle whose width (indicated by w) and height (indicated by h) are both 100. Lock the aspect ratio, and obtain the smallest image in the extended area of the 100 × 100 rectangle.

    image/resize,m_mfit,h_100,w_100

    The style effect will be displayed on the right in real time. Figure 2 shows the final style effect.

    Figure 2 Effect of style style002

  11. Click OK to save the style. The new style style002 will be displayed in the style list.
  12. In the navigation pane, choose Objects. Click mountain.jpg in the object list to go to the file details page.
  13. Click the Preview Image tab to preview the effect of the image with style style002 applied.

    Figure 3 Preview Image

  14. In the image style card, click Copy Link. When Copied successfully. is prompted, you will have the address for accessing the image with the style applied.