OSS Image Processing
Start course
1h 3m

This course explores the Alibaba Object Storage Service (OSS), covering the basics of the service and then looking at its features through guided demonstrations from the Alibaba Cloud Platform.

Learning Objectives

  • Understand basic OSS concepts.
  • Learn how to manage buckets and objects on OSS,
  • Understand how to carry out image processing
  • Learn how to carry out website hosting and monitoring on top of OSS
  • Learn about Alibaba custom domains and anti-leeching features
  • Learn about OSS's security model

Intended Audience

This course is intended for anyone who wants to learn more about Alibaba OSS, as well as anyone studying for the ACP Cloud Computing certification exam.


To get the most out of this course, you should have a basic understanding of the Alibaba Cloud platform.


Let's now take a look at OSS's built-in image processing capabilities. So the OSS service includes the ability to process images in the background, in a serverless way at high capacity and with high reliability for any image that is stored in an OSS bucket. So in order to do this, you upload an image to OSS. You append a tag to the URL, pointing to the image, and then a new image is produced and sent to you when you make a gift quest, save via browser or via the command line. The functions we support include converting image formats, scaling, cropping, and rotating, and adding text or image watermarks. You can also apply color effects. And in fact, you can combine these effects together into what is called a style, and then invoke that style as a URL parameter. The way this is done, is by appending the x-oss-process query string, to the end of the URL.

So of course, you have your bucket name, endpoint, and object. And then at the end of that, you append this x-oss-process query string. And you can either directly call, built-in operations like resize, or you can call a style. A style is a set of image processing tasks that you want to perform together. So you can give a style, a style name, and then a pen, the style name after the OSS process query string, to call that style and produce a process to final output image. So rather than just talking about this, let's go ahead and try it out. Let's have a quick demo in the console.

Let's go ahead and create an OSS bucket. So what I'm going to do is click on console here, and then we'll enter the console. This is the console homepage. From here, I will now server to the top left. As soon as I put my mouse over this orange button, this menu will pop open, our mouse over products and services, and that will open the product and services list. From here, I can search for OSS. Down here, under storage and CDN, you see object storage service. I'll go ahead and click on that. And let's go ahead and make ourselves a bucket.

So I'll go to the bucket's list. You'll notice that the OSS console records all bucket information globally. So I don't need to switch to a particular region to see my buckets. All the buckets that I have worldwide will show up in a single list here. And you can see, I've got a few buckets already from previous demos. I've got a few buckets that are linked up to our data processing toolset data works. I've got one for recording logs and audit trails under my account. Let's make a new one for holding images, so we can try out our image processing functionality.

So I'll go ahead and click on create bucket. And we need to choose a region. I'm going to go ahead and choose Singapore. And I'll call it, JDP image bucket. And remember the name has to be globally unique. So if I choose something like bucket, it's probably taken. So you can see bucket already exists, right? Maybe my initials are okay. Nope. Someone already has those too. So usually, it pays to choose a long descriptive name. It's much, much less likely to be taken. So I'll go with JDP image bucket. And I can choose these storage class, the default storage class for all of the items in the bucket. I can choose either standard IA or archive from here. I will stick with standard.

Not all of the objects in a bucket have to be in the same storage class of the default. When I upload new objects will be standard, if I choose standard here. But I can use bucket lifecycle to take certain items and place them into IA or archive. Zone-redundant storage, if I turn this on, I will get higher availability and data durability. I'm going to leave it disabled because I'm just doing a demo. Versioning, if I turn this on, when I upload newer versions of an existing object, then instead of being deleted, the old version of the object will be stored and tagged with a version number. Again, I'll leave that disabled for this demo.

Let's now go look at the encryption options. So I have three options, none, OSS managed, and KMS. If I choose OSS managed, then all of the items in my bucket will be encrypted with an AES 256 key, that is managed by the OSS service on Alibaba Cloud. If I want to use my own key, I can create a key inside of our key management service and then assign that key to the bucket. Of course, I don't currently have a master key, so that won't work. So I'll just go with OSS managed to use the built-in key. If I wanted to use KMS, I would have to go to the KMS console and set up a new key over there.

Let's turn on realtime log query. At this way, I can show you a log results for requests I make against the bucket endpoint for this bucket. This is not required. This is optional. But by turning it on, all of my logs will be stored. All my logs of the last seven days will be stored free of charge, and I'll be able to do a full tech search on those logs. And if I want, I can actually also turn on scheduled backup for my bucket that will use our hybrid backup and recovery service to take all of the data stored in OSS, and make a snapshot of it via HBR. I'm going to leave that disabled. So I've now sent my bucket up the way I want and I can click OK, and the bucket will be created. Once the bucket is created, we can navigate into the bucket and try uploading some data. So that will be next.

So here's our bucket. It has been created. You can see, versioning is not turned on. The access control list is private. So you can not access this bucket without a signing key. You need to authenticate first. And the retention policy is set to you, disabled. Let's go ahead and make some changes. First of all, I want to change the ACL. I want to change the bucket policy from private to public read. I want to make the contents of the bucket available publicly. So I'll click continue here. I've received a warning. Warning me that public read means anyone can access the bucket without authentication. That's fine. This is what you will typically choose for hosting a website or hosting images that need to be downloaded to a user's device because in this way, you don't need to sign your URLs.

So I'll go ahead and choose public read, and click save. You can also see, I can set what's called a bucket policy here. This allows me to have further fine grain control over the bucket. So if I click configure, I can add an authorization policy here by clicking authorized. I can apply it to specific resources in the bucket, say by following a particular directory prefix or to the whole bucket. And I can say who the policy applies to. Does it apply to other Alibaba Cloud accounts, to RAM users under my account or to anonymous users? And of course, if you choose anonymous, you receive a warning because applying a policy to anonymous users means those users may be able to access the bucket without authentication.

I can then say what operations are acceptable? None. Any operation read, write, or read-only. And I can set conditions, so I can set IP whitelist or blacklist, where I can set conditions on the access method. For instance, I can say, this bucket is only accessible to users over HTTPS. I will leave the bucket policy blank. I will not create any policies at this time. And then of course, once you have created policies, you may want to go over to the RAM console and set up some RAM users that inherit those policies. So now that we've changed our bucket ACL to public read, let's insert some files into our bucket and do some image processing tasks. So let's go find some images.

So we're now ready to go ahead and upload some images. So I'll click on upload here. There are multiple ways to upload images. I don't have to do this through the console, to the web console. I could also do this through the command line. I could use the Aliyun CLI command line tool, or I could use our multi-part coupler tool, which is designed for larger uploads. In this case for convenience, I'll just use the web console. So I'll click on upload. Then you can see here, I have the option to actually change the ACL for this object. So if I inherit from the bucket, the bucket is set to public read right now. So all the objects I upload will also be public read, but I could choose private or public read and write. I'm just going to leave the default setting of inherit from the bucket. And I'll go ahead and click upload. And I've got this images folder here. And I've got a bunny and a kitten.

So let's go ahead and upload both of those. And you can see, they are now both uploaded. There's a little progress bar that will show up here or a percentage that will show up here that will tell you how the upload is going. Unfortunately, you couldn't see it this time because these images are very small. So the upload was quite fast. If I want, I can actually hit this confusingly titled button here. It says removed, now that will actually clear this list. It will not actually delete anything from your bucket. It will just clear the list of upload tasks. So you can see both of those images are now here. If I click on one of these images, I will get a preview of the image, some information about its file name, some information associated, some image, metadata that's associated with this object in my bucket. And also, the bucket URL for this image.

So if I copy this URL and paste it into a new tab, that should actually open up the image in my browser. So you can see that this URL here, actually points to this item that I've uploaded. This is a unique URL, globally unique within the OSS service. And I can use this to fetch this object or embed this image into a webpage or fetch it from an application. So how do we go about doing image processing? How do I do that? So if I want to add image processing flags, it's fairly simple. So I'll again, I'll open up a new tab. I'll paste in that URL. And I just need to add that X OSS process query string. And I have to say, what I want to do? I indicate that I want to process an image. I'll say, I want to resize the width. And I'll say, I want the image to be 100 pixels across. So let's go ahead and try that.

Oops, oh, that didn't work. So it looks like I got the parameter name incorrect here. That's okay. We can try again. Let's fix that and then have another try. Okay, so I see the error. I was off by a little bit here that should've been resized comma, and then width, 100. So you can see, I now get returned to me a smaller version of the image. So that has actually been reduced in size automatically on the backend. The original image in my bucket is still there and it's still the original size and resolution. That new smaller image was produced for me automatically by the image processing service.

I could also choose, say a larger size, like 500 pixels across. And of course, I could scale the size of the image and pixels, horizontally as well. I could scale it horizontally down to 400 or 300, if I want. It's also possible for me to create a style which combines multiple image processing operations. Give that style a name and then call the style here in the X OSS process query string. So let's try that out as well. So let me close this image. And we'll go down to the data processing section. And you can see, there's an option here for image processing. I'll click on that. And I can create a new rule.

So let's go ahead and create a new style called caption. And we'll add text to our image. So let's go take a look at some of the effects. I can change the image file format, change the quality. Do all kinds of things from here. But what I want to do though, is ignore most of this blurring and sharpening, and whatnot. And just add a text-based watermark to my image that says, so cute. And I want that actually, let's make that all caps, so cute. And I want it to be at the top of the image. And I'd like to change the font size a little bit. And it should be a different color. Let's select white, shall we? I don't see white as an option here. I'll just type it in the hex. There we go. Now the text is white.

I could rotate the text if I want. I'll just leave it at the top. Text filled. Turn that on then fills the whole image. Text shadow, that will place a shadow behind the text. That makes it look nice. Let's leave that turned on. And then I'll click OK. And so this is our new style URL. So actually, this is what I'm doing. I'm doing auto orient. I'm changing the quality 90%. I'm adding in text watermark with this color. And I'm changing the size of the text and setting a shadow behind the text, et cetera, et cetera. These are the actual parameters that are going to be passed to the image processing service. I don't have to remember all of that though, because after I clicked OK, my new style will get a name. It's called caption. And so, I can actually just do this. I can have the X OSS process query string, and then style slash style name, in this case, caption.

So let's try that. So we'll do that to our bunny. Let's see. Style, oops. Styles slash caption. So cute. So it's the original size and it has this style caption applied to it, which puts texts at the top of the image. We can also do that to our other image. There's no reason we can't try that out on our kitten too. Your processing tools will work on a webpage just as well. They work on multiple different image formats. So let's go ahead and try it on this kitten. So here's my original kitten picture. And then I can do X OSS process, style, caption, so cute. And sure enough, it works. And there you go, that's how you use the image processing capabilities built into OSS.

About the Author
Learning Paths

Alibaba Cloud, founded in 2009, is a global leader in cloud computing and artificial intelligence, providing services to thousands of enterprises, developers, and governments organizations in more than 200 countries and regions. Committed to the success of its customers, Alibaba Cloud provides reliable and secure cloud computing and data processing capabilities as a part of its online solutions.