You can add watermarks for branding and publicity. This helps protect the copyright of images and prevent unauthorized use of images. Alibaba Cloud CDN supports picture watermarks and text watermarks. You can place watermarks on images and change the transparency of watermarks so that watermarks do not affect the image content.
The image editing feature of Alibaba Cloud CDN, the image editing feature of Dynamic Content Delivery Network (DCDN), and the Image Processing (IMG) feature of Object Storage Service (OSS) are three different features.
Image editing is a paid service. It is free of charge until further notice.
The image processing feature is in private review. To use this feature, submit a ticket.
Usage notes
You can add a maximum of five watermarks to an image. Picture watermarks and text watermarks are supported.
You cannot resize picture watermarks. The size of a base picture that is used as the watermark cannot exceed 1 MB.
Parameters
Action: watermark
Basic parameters
Parameter
Description
Valid value
t
The opacity of the text or picture watermark.
[0,100]
Default value: 100, which indicates that the watermark is opaque.
g
The position of the watermark on the image.
nw: upper left.
north: upper middle.
ne: upper right.
west: middle left.
center: center.
east: middle right.
sw: lower left.
south: lower middle.
se: lower right.
For more information about the positions, see the following figure.
x
The horizontal margin, which is the horizontal distance between the watermark and the image edge. This parameter takes effect only if the watermark is positioned in the upper-left, middle-left, lower-left, upper-right, middle-right, or lower-right corner of the image.
[0,4096]
Default value: 10. Unit: pixels.
y
The vertical margin, which is the vertical distance between the watermark and the lower edge of the image. This parameter takes effect only if the watermark is positioned in the upper-left, upper middle, upper right, lower left, lower middle, or lower-right corner of the image.
[0,4096]
Default value: 10. Unit: pixels.
You can use x, y, and offset to adjust the position of a watermark on an image. You can also use these parameters to adjust the watermark layout when the image contains multiple watermarks.
Picture watermark parameters
Parameter
Description
Valid value
image
You can specify watermark URLs that are accessible over the Internet. If authentication or permissions are required to access the specified URL, Alibaba Cloud CDN may fail to retrieve the watermark URL.
Watermark URLs must be Base64-encoded. For more information, see Encode watermarks.
Base64-encoded strings.
Text watermark parameters
Parameter
Description
Valid value
text
The content of the text watermark. The text content must be Base64-encoded. For more information, see Encode watermarks.
A Base64-encoded string that contains at most 60 characters in length.
type
The font of the text watermark. The font name must be Base64-encoded. For more information, see Encode watermarks.
Up to 10 fonts are supported. For more information, see the following table.
NoteIf you use a font that is not included in the 10 fonts, the font is recognized as the default font alihyaihei.
color
The color of the text watermark. The valid values for this parameter are RGB color values.
For example, 000000 specifies black, and FFFFFF specifies white.
Default value: 000000.
rotate
The degree by which the text is rotated clockwise.
[0,360]
Default value: 0. A value of 0 specifies that the text is not rotated.
fill
Specifies whether to tile the source image with the text watermarks.
Valid values: 0 and 1. Default value: 0.
0: does not tile the source image with the text watermarks.
1: tiles the source image with the text watermarks.
size
The size of the text watermark.
(0,1000]
Default value: 40.
Unit: pixels.
The following table describes the valid values of the type parameter and the encoded strings of these values.
Text font
Description
Encoded value
alihyaihei
A bold font. This is the default font.
YWxpaHlhaWhlaQ
hysong
A Songti font variant.
aHlzb25n
hyhei
A Heiti font variant.
aHloZWk
hyshuangxian
A double line font.
aHlzaHVhbmd4aWFu
comfortaa
Comfortaa
Y29tZm9ydGFh
notosans
NotoSans
bm90b3NhbnM
Encode watermarks
When you add watermarks to an image, the content, color, and font of text watermarks and the name of picture watermarks must be URL-safe Base64-encoded. To encode watermarks, perform the following steps:
Base64-encode the content.
We recommend that you use URL-safe Base64 encoding tools to encode the text content, font of text watermarks, and the URLs of picture watermarks. The encoded strings of watermarks can be used only in parameters used to add watermarks. Do not include the encoded strings of watermarks in signature strings.
Replace the encoded content based on the following rules:
Replace the plus signs (+) in the encoded string with hyphens (-).
Replace the forward slashes (/) in the encoded string with underscores (_).
Omit the equal signs (=) at the end of the encoded string.
Examples
Add a text watermark "Hello World":
Base64-encode the string "Hello World" into a URL-safe string. For more information, see Encode watermarks. The encoding result of the text content is
SGVsbG8gV29ybGQ
. The encoding result of the hysong font isaHlzb25n
. The request URL ishttp(s)://example.com/image01.png?image_process=watermark,text_SGVsbG8gV29ybGQ,type_aHlzb25n
.Add a text and image watermarks:
Add a text watermark : Hello World. The Base64-encoded URL-safe string is
SGVsbG8gV29ybGQ
.Set the position of the text watermark to lower right, the horizontal margin to 10 pixels, and the vertical offset from the middle line to 10 pixels by using
g_se,x_10,y_10
.The URL of the picture watermark is
http://example-test.oss-ap-southeast-1.aliyuncs.com/image/shuiyin.png
. The Base64-encoded value isaHR0cDovL2V4YW1wbGUtdGVzdC5vc3MtYXAtc291dGhlYXN0LTEuYWxpeXVuY3MuY29tL2ltYWdlL3NodWl5aW4ucG5n
.Set the position of the picture watermark to upper left, the horizontal margin to 10 pixels, and the vertical offset from the middle line to 10 pixels by using
g_nw,x_10,y_10
.The request URL is
http(s)://example.com/image01.png?image_process=watermark,text_SGVsbG8gV29ybGQ,g_se,x_10,y_10/watermark,image_aHR0cDovL2V4YW1wbGUtdGVzdC5vc3MtYXAtc291dGhlYXN0LTEuYWxpeXVuY3MuY29tL2ltYWdlL3NodWl5aW4ucG5n,g_nw,x_10,y_10
.