Overview

Image processing V1.0 is the old version of the BOS image processing protocol. The current new features of BOS such as adaptive format and advanced image compression are only supported through the V2.0 protocol.

Rules and Restrictions

• Supported original photo format: jpg、png、bmp、webp、gif、tiff.
• Supported target photo format: jpg、png、bmp、webp.
• Supported photo size is 100 MB, and the length and width of a photo are no greater than 4096 px.
• The number of domain names (including image domain names) bound to one Bucket cannot exceed 200, where the domain name of image can not be more than 1.
• For the same domain name, only one binding method is supported. Either the binding of common domain name or the image domain name can be selected, and the two binding methods are not supported at the same time.
• Unordered principle has been selected for the parameter processing of the same group of processing commands, for example, @w_250, h_380, q_90 equals @h_380, w_250, q_90.
• If the Object name obtained has been affixed with the symbol @, all subsequent characters should be treated according to the processing command, and users need to replace the @ symbol in the object name in advance.
• At most 4 pipes are supported.
• The signature calculation of Authorization is similar to that of ordinary Object, but the image name with parameters must be used as a complete URL Path for signature. For example, the URL calculated by the watermarked photo signature should be

http://test.gz.bcebos.com/IMG_5974.JPG@!shuiyin1?authorization=... 

Image Access Rules

You can access images in three ways. BOS supports direct access and display of the original image, and you can also access the image through commands, or also access it by creating a style.

Directly access and display the original image

Direct display of original photos is the same as binding way to ordinary domains. URL takes the following form: http://${userdomain}/${objectkey}

• userdomain is a domain name bound by the user.
• objectkey is an original photo name stored in BOS.

Example: http://www.myhost.com/pic.jpg

Access by command

URL The form is: http://${userdomain}/${objectkey}@${commands}

• userdomain is a domain name bound by the user.
• objectkey is an original photo name stored in BOS.
• commands is [Processing Command](#Basic Concepts).

Example: http://bucket-A.bj.bcebos.com/sample.jpg@w_200, q_80

Separator

The image processing V1.0 protocol includes the following separators:

Pipe

If a photo requires multiprocessing, such as firstly executed cropping and later executed abbreviation, it is needed to link it by pipe “|” and execute it form the left to the right, which is designated by pipe.

The following example is a pipeline, the execution order is from left to right, and the processing result of the left command will be used as the input of the right command.

http://${userdomain}/${objectkey}@${cropcommands}|${scalecommands} 

Command example:

(1) For example, cut the photo first, then zoom. First crop the image from the point with the horizontal coordinate of 10 and the vertical coordinate of 20, designate the crop width as 600 and the height as 300, stretch and scale the image based on the width of 200 and the height of 200, and designate the absolute quality of the target image as 60 and the format of the target image as png. https://doc.bce.baidu.com/bce-documentation/BOS/image.jpg@c_1, x_10, y_20, w_600, h_300|s_1, w_200, h_200, q_60, f_png (2) Such as zoom, rotate, and crop the photo first. Scale the image by the proportion of width of 200, rotate the image 90 degrees clockwise, and then crop the image from the horizontal coordinate of the upper left corner to 50 and the vertical coordinate to 100, where the crop width and height should be the width and height of the image by default. https://doc.bce.baidu.com/bce-documentation/BOS/image.jpg@w_200, a_30|c_1, x_50, y_100> (3) For example, make the photo and text mixed watermark: The watermark image is in the form of bce-documentation/BOS/bce.jpg, which is located at the lower left corner of the original image with the horizontal distance from the anchor point of 15, the vertical distance of 20, and the transparency of 50; the text content is “hello world”, which is located at the top with the vertical distance of 100, and the font color is lavender. https://doc.bce.baidu.com/bce-documentation/BOS/image.jpg@wm_1, k_YmNlLWRvY3VtZW50YXRpb24vQk9TL2JjZS5qcGc=, g_7, x_15, y_20, o_50|wm_2, t_aGVsbG8gd29ybGQ=, g_2, y_100, fc_aa88aa

• The mixed photo and text watermark The watermark image is in the form of bce-documentation/BOS/bce.jpg, which is located at the lower left corner of the original image with the horizontal distance from the anchor point of 15, the vertical distance of 20, and the transparency of 50; the text content is “hello world”, which is located at the top with the vertical distance of 100, and the font color is lavender.

  https://doc.bce.baidu.com/bce-documentation/BOS/image.jpg@wm_1,k_YmNlLWRvY3VtZW50YXRpb24vQk9TL2JjZS5qcGc=,g_7,x_15,y_20,o_50|wm_2,t_aGVsbG8gd29ybGQ=,g_2,y_100,fc_aa88aa

  

Access through style

During multiprocessing of a photo, URL accessed by this photo will became complicated and very long, which goes against management and reading. To make figure URL become more concise and elegant, or achieve the goals of concealing processing parameters and protecting original photo, you can use photo style function.

Photo style indicates that you can save frequently used figure processing operations as an alias, namely a style. In this way, a set of complicated operations can be replaced by a concise URL access which is able to achieve the same effects by use of style.

The style form of image processing V1.0 is:

http://${userdomain}/${objectkey}@!${stylename} 

Among them,

• userdomain: The domain name bound to the user.
• objectkey: It is the name of the original photo stored on BOS.
• stylename: It is the style name

If you create a style named mystylename, you can access it as follows:

http://bucket-A.bj.bcebos.com/sample.jpg@!mystylename 

Add and Delete style

Adding style

You can define the image style through the console, and can preview the effect in real time at the same time.

1.Log in to the BOS console and enter the Bucket where you have opened the image service. Click “image service” on the left navigation page, and then click “style management” on the right page.

2.Click “adding style” to enter the form page of adding style. You can set the image processing parameters of the style as required, and you can preview the effect in the preview area on the right part in real time.

The setting methods of image style include “basic setting” and “advanced setting”.

• For basic settings, you need to manually set each processing parameter below on the page.
• For advanced settings, you can directly enter command parameters of image processing in the box.

After creating the style, click “OK”.

Zoom instruction

• Limit the proportion of width and height.

  You need to enter the information of width; and when you abbreviate the image, you should take the width as the benchmark, and reduce the height by an equal proportion. If the input width is greater than the original width, you should return the image to the original.

  E.g.: The width and height of the original drawing is 400 × 320, the width is limited to 200, the height is equal to the scale, and the generated thumbnail size is 200 × 160; besides, the width is limited to 500, the height is equal to the scale, and the generated thumbnail size is 400 × 320.

• Limit the proportion of height and width.

  You need to enter the information of height; and when you abbreviate the image, you should take the height as the benchmark, and reduce the width by an equal proportion. If the input height is greater than the original width, you should return the image to the original.

  E.g.: The width and height of the original drawing is 400 × 320, the height is limited to 160, the width is equal to the scale, and the generated thumbnail size is 200 × 160; besides, the height is limited to 500, the width is equal to the scale, and the generated thumbnail size is 400 × 320.

• Limit the proportion of height and width.

  You need to enter the information of width and height, and abbreviate the image according to the original scale until the width and height meet the set value without clipping.

  E.g.: The width and height of the original drawing is 400 × 320, the width is limited to 100, the height is equal to the scale, and the generated thumbnail size is 100 × 80; besides, both width and height are limited to 500, and the generated thumbnail size is 400 × 320.

• Fixed width and height.

  You need to enter the information of width and height, abbreviate the image according to the original scale, and cut the part exceeding the set width and height in the middle.

  E.g.: The width and height of the original drawing is 400 × 320 , the limited width and height are 100 (zoom the larger image and crop it), and the generated thumbnail size is 100 × 100; besides, both width and height are limited to 500 (zoom in on the smaller image and crop it), and the generated thumbnail size is 500 × 500.

3.After you save the style, you can see the style information you have added in the list. You can click “view command” to view the parameter command corresponding to the style.

Delete style

You can click “delete” in the “operation” column in the style management list to delete one certain style.