Azure Content Delivery Network: Photo processing

Article
04/09/2020
13 minutes to read

Overview

Azure Content Delivery Network Image Processing is a reliable, secure, and affordable image processing service provided by Content Delivery Network services. Its functions include scaling, cropping, rotating, sharpening, blurring, pipeline, watermark brightness and contrast, format conversion, and getting image information. It can flexibly adapt to a variety of requirements, including varied device sizes, image display styles for different pages, and anti-theft watermarks.

With Content Delivery Network Image Processing, you can use Content Delivery Network services to obtain processed versions of images from any location and any device at any time.

Service Details

Content Delivery Network Image Processing was introduced as a value-added function for Content Delivery Network services. To use Image Processing, you must first create a Content Delivery Network-accelerated node with the acceleration type of image processing. [!NOTE]  The image service cannot be used as a standalone Azure service.

There is currently no graphical user interface (GUI) for the Content Delivery Network image service. After you have created the corresponding Content Delivery Network-accelerated node, directly use the Content Delivery Network-accelerated domain and add image processing parameters to control the dimensions, crop mode, and quality of the image to access the processed version of the image.

Limitations

Conversion of the following file formats is supported: JPG, PNG, BMP, WEBP, GIF and TIF.
The original image file must not be larger than 20MB.
The maximum resolution for images before and after processing is 4096 x 4096, and no side may be longer than 4096 pixels.
If a customer sets up HTTPS support to accelerate image processing and uses HTTPS back-to-source, the source station is required to support TLS 1.2 for security reasons. A third-party test tool can be used to test whether the source station supports TSL 1.2 (for example, the OpenSSL tool).

Service-creation process

Content Delivery Network nodes with the “image processing” acceleration type can only be created from the Azure Portal.

Step 1: Create a Content Delivery Network profile

In “CDN profiles,” click “Add.”
Enter “Name,” “Subscription,” “Resource Group,” “Resource Group Location,” and “Pricing Tier,” for which the default “S1 Standard” should be selected.
- “S1 Standard” is the Standard edition of the CDN, which supports Static Content Acceleration, including Web Acceleration, Download Acceleration, and VOD Acceleration.
- “P1 Standard Plus” is the Standard Plus edition, which refers to Live Streaming Acceleration.
- “P1 Premium” is the Premium edition of the CDN. It refers to customers who requested Azure CDN to apply for a certificate on their behalf, who are still being served using this certificate, and who are still paying for the Premium edition. Support for HTTPS functions with Azure applying for certificates on the customer’s behalf will be discontinued from July 1, 2019. See Pricing Details for more information.
Click the “Create” button.

Note: If images are to be stored in Storage, you must ensure that the Azure subscription selected in this step is the same as the subscription used to create the Storage account in Step 1. Select “S1 Standard” for the price tier, as shown in the image above. The S1 Standard includes the new “Image Processing” acceleration type.

Step 2: Create a Content Delivery Network-accelerated node with the image processing acceleration type

As shown in the image above, do the following:  1. Choose image processing acceleration for the acceleration type. 2. Choose the corresponding source station type for your source station.

3. After the Content Delivery Network-accelerated node has been configured, you can CNAME the custom domain name to the Content Delivery Network platform. 4. After the CNAME takes effect, you can start processing images. All original images and processed images will subsequently be accelerated by the Content Delivery Network.

Step 3: Verify that an image is accessible

Before you start doing any specific processing of images, verify that all the configurations you’ve created so far have taken effect. If you stored the original image in an account that is not a Storage account, go directly to the section “Access verification”. If the original image is stored in an Azure Storage account, follow the steps in the following three sections:

3.1 Create a Storage account and select the Storage account as the source station.

To find out how to create an Azure Storage account, see Create a Storage Account.

You can also use an existing Storage account instead of creating a new one.

3.2 Upload the original image

After you have created a Storage account, you can upload the original image into the blob.

There are three methods for uploading:

3.3 Access verification

Assuming that the access link for your original image is http://yourstorageaccount.blob.core.chinacloudapi.cn/container_name/img_name.jpghttp://yourstorageaccount.blob.core.chinacloudapi.cn/container_name/img_name.jpg, first confirm that the link is accessible (that is, the corresponding container and blob files are publicly accessible).
If you can access the Content Delivery Network-accelerated access link for the original image (taking the custom domain name that's used in the previous image as an example) http://imgprocess.yourcompany.cn/container_name/img_name.jpg, you can be sure that all the configurations have taken effect.

Image Processing

Image processing access rules

For access, use the following URL:

http://your_CDN_custom_domain/container_name/image_object?basic=<处理字符串>

your_CDN_custom_domain: The custom domain name that you used to create the image processing acceleration-type Content Delivery Network node (for example, imgprocess.yourcompany.cn).

container_name: The name of the Storage container where the original image is located

image_object: The name of the original image for processing, (for example, image.jpg).

A specific explanation of 处理字符串 is provided below.

Image Processing Syntax

Detailed definitions for processing strings

处理字符串 A combination of parameters in a form such as {值}{参数关键字}, wherein all the parameters are linked by _.

To perform format conversion, Process String must have the ending .{目标格式扩展名}.

Supported basic image operations (parameters)

Operation name	Syntax	Notes
Scale and crop	`{Percentage}p`, `{Height}h`, `{Width}w`, `{ScaleType}e`, `{Cut}c`, `{HandleIfLarger}l`, `{Red}-{Green}-{Blue}bgc`. If you wish to use the `{Red}-{Green}-{Blue}bgc` parameter, it must be used together with the `{ScaleType}e`, `{Height}h` and `{Width}w` parameters. See the table below for details
Advanced crop	`{x}-{y}-{Width}-{Height}a`, within which `{x}` and `{y}` respectively define the horizontal and vertical coordinates of the crop start position, `{Width}` and `{Height}` respectively define the width and height of the crop region in the range 1-4096.	A crop start position outside the range of the original image will cause a 400 `Bad Request`, while a crop that is beyond the original image range or where the specified width and height are zero will crop up to the end position of the original image
Region crop	`{Width}x{Height}-{Position}`rc, in which `{Width}` and `{Height}` respectively define the width and height of the crop region in the range 0-4096, and the crop will be performed by the method defined by `{Position}`; see the following table for the implications of different values.	Setting width/height values larger than the original dimensions will return the original image, while an empty `Height` or `Width` value or a value of zero indicates that the height/width of the original image will be used.
Inscribed circle	`{Radius}-{Type}ci`, within which `{Radius}` specifies the radius of the inscribed circle, `{Type}`: an integer with a value of 0 or 1, where 1 means that the image returned will be cropped to the smallest square shape that can accommodate the inscribed circle; otherwise it will not be cropped
Rounded rectangle	`{Radius}-2ci`, within which `{Radius}` specifies the radius of the rounded corners	The rounded corner radius cannot be larger than half the length of the shortest side of the original image
Indexed crop	`{length}x-{index}ic` or `{length}y-{index}ic`, respectively correspond to performing a slice based on the horizontal coordinates or the vertical coordinates. This returns an image composed of the first several such slices, within which `{Length}` is the width of the slice and `{index}` is the sequence number of the slices returned	The slice sequence numbers start from zero, while the original image will be returned if the number is larger than the slice setting for the original image
Rotate	`{Degree}r`, within which `{Degree}` represents the degrees of clockwise rotation performed on the image
Sharpen	`{Degree}sh`, within which `{Degree}` is a non-negative integer that specifies the degree of sharpening
Blur	`{Radius}-{Sigma}bl`, within which `{Radius}` is the blur radius and `{Sigma}` is the blur’s standard deviation
Brightness and contrast	`{Brightness}b` and `{Contrast}d`, wherein `{Brightness}` is an integer that may be negative and indicates the adjustment in brightness relative to the original image, while `{Contrast}` is an integer that may be negative and indicates the adjustment in contrast relative to the original image
Image quality	`{Degree}q`, within which `{Degree}` is an integer value indicating the image quality in the range 0-100	Only valid when the output format is `jpg/jpeg`.
Format conversion	`.{format}`, within which `{format}` is the target format	The following formats are currently supported: `jpg`, `jpeg`, `png`, `webp` and `gif`
Progressive display	`{Setting}pr`, within which `{Setting}` is an integer in the range 0-1, and the image will be progressively presented to the user as it is loaded when this value is 1	Only valid when the output format is `jpg/jpeg`.
Image information	`info`, returns the image details in JSON format; see the corresponding subsection that follows.	Cannot be used together with other parameters
Image EXIF information	`exif`, returns the image’s EXIF information in JSON format; see the API examples that follow for details.	Cannot be used together with other parameters
Image main color	`imageAve`, returns the image main color information in JSON format; see the corresponding subsection that follows.	Cannot be used together with other parameters
Pipeline	`{Process1}`\|`{Process2}`, within which `Process1` and `Process2` are both `处理字符串` and the image is first processed by using the operation process defined by `Process1`, and then processed by using the operation process defined by `Process2`.	`Process` may be any of the preceding parameters except 图片信息``EXIF 信息 and `图片主色调`.
Watermark	See the corresponding subsection that follows.	Cannot coexist with other parameters in the same section of the pipeline.

Location

Value	Definition
1	Top left
2	Top
3	Top right
4	Left side
5	Center
6	Right side
7	Bottom left
8	Bottom
9	Bottom right

Scale and crop

Parameter

Name	Description
`{Percentage}`	An integer with a value in the range 1-1,000 that indicates the processing performed on the width/height
`{Height}`, `{Width}`	The height value and width value of the required image, which must be a non-negative integer that does not exceed the dimension limits
`{ScaleType}`	An integer that defines the scale mode; see the following table for details.
`{Cut}`	An integer with a value of 0 or 1, wherein no other operations are performed when it is the default value 0, but the original image is automatically cropped to specified dimensions when the value is 1
`{HandleIfLarger}`	An integer with a value of 0 or 1, wherein the default value 1 permits the image to be scaled up to dimensions larger than the original dimensions, while a value of 0 means that the original image dimensions are used when the specified dimensions are larger than the original image
`{Red}`, `{Green}` and `{Blue}`	Integer values in the range 0-255, which respectively represent the red, green, and blue channel values filled in in the RGB color space

Note:

The results of processing in any situation must not make the image dimensions larger than the limits. See the 限制section in 简介 for specific limits.
PercentageMay be used together with Height or Width; the image will be scaled to a size where the specified width and height are multiplied by a specified percentage
, Height and Width can all exist independently. Any of the values that are missing will default to the original image dimensions
and Percentage may exist independently. The image will be scaled to a size where the original dimensions are multiplied by a specific percentage
and Cut only takes effect when it coexists with Height and Width
The background color must be used together with {ScaleType} 4

Scale mode

Value	Presentation
0 or undefined	Locked aspect ratio and long side prioritized
1	Locked aspect ratio and short side prioritized
2	Forced width/height
4	Locked aspect ratio and short side prioritized, and fill in empty regions with a specified color after scaling (automatically filled in white if the color is not specified).

Note: The concepts of 长边 and 短边 here are determined based on the ratioof 原始长度 / 目标长度.

Image information response body

Includes at least the JSON objects for the following strings:

Name	Content
Width	Image width in pixels
Height	Image height in pixels
Size	Image file size in bytes
MimeType	Original image file type

Response body example

{
    "Width": 221,
    "Height": 284,
    "Size": 119540,
    "AveColor": null,
    "MimeType": "Jpeg"
}

Image main color response header

Includes at least the JSON objects for the following strings:

Name	Content
RGB	The image’s main colors indicated by a hexadecimal value in the RGB color space

Response body example

JSON

{
    "RGB": "273B2A"
}

Example (updates ongoing)

Assuming http://imgprocess.yourcompany.cn/container_name/img_name.jpg is the original image URL that has undergone Azure Content Delivery Network acceleration.

1. Scale the image down to 60% of the original size:

http://imgprocess.yourcompany.cn/container_name/img_name.jpg?basic=60p

2. Process the original image with rounded corners (with a corner radius of 20):

http://imgprocess.yourcompany.cn/container_name/img_name.jpg?basic=20-2ci

3. First, scale the image down to 60% of the original size, and then process the image with rounded corners (with a corner radius of 20):

http://imgprocess.yourcompany.cn/container_name/img_name.jpg?basic=60p_20-2ci

4. Get the image information:

http://imgprocess.yourcompany.cn/container_name/img_name.jpg?basic=info

JSON

{
    "Width": 800,
    "Height": 400,
    "Size": 87341,
    "AveColor": null,
    "MimeType": "Jpeg"
}

5. Get the image’s EXIF information:

http://imgprocess.yourcompany.cn/container_name/img_name.jpg?basic=exif

JSON

{
    "Orientation": 1,
    "XResolution": 72.0,
    "YResolution": 72.0,
    "ResolutionUnit": 2,
    "Software": "Adobe Photoshop CS5 Windows",
    "DateTime": "2014:04:15 16:43:14",
    "ColorSpace": 1,
    "PixelXDimension": 800,
    "PixelYDimension": 400
}

6. Get the image’s main colors:

http://imgprocess.yourcompany.cn/container_name/img_name.jpg?basic=imageAve

JSON

{
    "RGB": "0296C8"
}

Watermark operations

The watermark function’s 处理字符串 is a query string that may include the following fields:

Name	Description
watermark	Integer that defines the watermark type, value in the range 1-3; see the following table for detailed explanations.
p	Integer value that defines the watermark position, with a value in the range 1-9; see the previous table for detailed explanations.
t	Integer that defines the transparency of the watermark, valid when the watermark type is image watermark. Value between 0-100
text	String that has been `Base64`-encoded and defines the watermark content
type	String that has been `Base64`-encoded and defines the name of the font used for the watermark text; see the following table for supported fonts.
color	Six-digit hexadecimal number in the 8-bit RGB color space that has been `Base64` encoded and defines the watermark text color. For example `白色`, with a value of `ffffff`, `Base64` after encoding is `ZmZmZmZm`.
size	Positive integer that defines the watermark text font size
object	String that has been `Base64`-encoded and defines the filename for the image used in the image watermark

Note:

The watermark field is mandatory and must be the first field in the query string
Images used in image watermarks must be stored in the same Storage account as the original image.
Base64 encoding conversion can be directly processed by using online tools, such as base64encode
The file content and filename distinguish between upper- and lowercase, so pay attention to capitalization when performing base64 transcoding.

Watermark type

Value	Definition
1	Image watermark
2	Text watermark

Supported fonts

Name	Definition	Base64 encoding
dengxian	Sans Serif	ZGVuZ3hpYW4=
fangsong	Fang Song	ZmFuZ3Nvbmc=
fangzhengshuti	FZShuTi	ZmFuZ3poZW5nc2h1dGk=
fangzhengyaoti	FZYaoTi	ZmFuZ3poZW5neWFvdGk=
kaiti	Kaiti	a2FpdGk=
lishu	Lishu	bGlzaHU=
microsoftyahei	Microsoft YaHei	bWljcm9zb2Z0eWFoZWk=
microsoftyaheiui	Microsoft YaHei UI	bWljcm9zb2Z0eWFoZWl1aQ==
xinsongti	NSimSun	eGluc29uZ3Rp
heiti	Heiti	aGVpdGk=
songti	SimSun	c29uZ3Rp
huawencaiyun	STCaiyun	aHVhd2VuY2FpeXVu
huawenfangsong	STFangsong	aHVhd2VuZmFuZ3Nvbmc=
huawenhupo	STHupo	aHVhd2VuaHVwbw==
huawenkaiti	STKaiti	aHVhd2Vua2FpdGk=
huawenlishu	STLiti	aHVhd2VubGlzaHU=
huawensongti	STSong	aHVhd2Vuc29uZ3Rp
huawenxihei	STXihei	aHVhd2VueGloZWk=
huawenxingkai	STXingkai	aHVhd2VueGluZ2thaQ==
huawenxinwei	STXinwei	aHVhd2VueGlud2Vp
huawenzhongsong	STZhongsong	aHVhd2Vuemhvbmdzb25n
youyuan	Simyou	eW91eXVhbg==

Sample

Assuming the watermark image file exists and uses container_name/watermark.jpg, the corresponding Base64 encoding for it is Y29udGFpbmVyX25hbWUvd2F0ZXJtYXJrLmpwZw==

1. Add a watermark image to the original image:

http://imgprocess.yourcompany.cn/container_name/img_name.jpg?basic=watermark=1;p=3;s=50;object=Y29udGFpbmVyX25hbWUvd2F0ZXJtYXJrLmpwZw==

2. The original image is first scaled down to 60% of the original size, then processed with rounded corners (with a corner radius of 20), and finally an image watermark is added (note that this uses the pipeline | operator):

http://imgprocess.yourcompany.cn/container_name/img_name.jpg?basic=60p_20-2ci|watermark=1;p=3;s=50;object=Y29udGFpbmVyX25hbWUvd2F0ZXJtYXJrLmpwZw==

3. The original image is first scaled down to 60% of the original size, then processed with rounded corners (with a corner radius of 20), and finally an image watermark is added (note that this uses the pipeline | operator), the text content is “Azure China CDN” and the font is “Microsoft Yahei”:

http://imgprocess.yourcompany.cn/container_name/img_name.jpg?basic=60p_20-2ci|watermark=2;p=3;s=50;text=QXp1cmUgQ2hpbmEgQ0RO;type=bWljcm9zb2Z0eWFoZWk=

Azure Content Delivery Network: Photo processing

Overview

Service Details

Limitations

Service-creation process

Step 1: Create a Content Delivery Network profile

Step 2: Create a Content Delivery Network-accelerated node with the image processing acceleration type

Step 3: Verify that an image is accessible

3.1 Create a Storage account and select the Storage account as the source station.

3.2 Upload the original image

3.3 Access verification

Image Processing

Image processing access rules

Image Processing Syntax

Detailed definitions for processing strings

Supported basic image operations (parameters)

Location

Scale and crop

Parameter

Scale mode

Image information response body

Image main color response header

Response body example

Example (updates ongoing)

1. Scale the image down to 60% of the original size:

2. Process the original image with rounded corners (with a corner radius of 20):

3. First, scale the image down to 60% of the original size, and then process the image with rounded corners (with a corner radius of 20):

4. Get the image information:

5. Get the image’s EXIF information:

6. Get the image’s main colors:

Watermark operations

Watermark type

Supported fonts

Sample

1. Add a watermark image to the original image:

2. The original image is first scaled down to 60% of the original size, then processed with rounded corners (with a corner radius of 20), and finally an image watermark is added (note that this uses the pipeline | operator):

Additional resources

Additional resources