edit-icon download-icon

Image processing

Last Updated: Apr 23, 2018

OSS Image Service (IMG) is an image processing service that features massive capacity, high security, low costs, and high reliability.By uploading and storing original images in OSS, you can process images anytime, anywhere, on any Internet device through a simple RESTful API.IMG offers image processing APIs. To upload images, use the OSS upload API. You can build your own image processing service leveraging the OSS IMG.

Basic features of Image Service

OSS IMG provides the following features:

Usage of Image Service

Image Service uses the standard HTTP GET request for access. All processing parameters are encoded in the QueyString in the URL.

Anonymous access

If the access permission of the image object is public read, as shown in the following table, you can access Image Service anonymously.

Bucket permission Object permission
Public-read or
Public-read-write
Default
Any permission Public-read or
Public-read-write

Access Image Service anonymously using the third-level domain in the following format:

  1. http://bucket.<endpoint>/object?x-oss-process=image/action,parame_value
  • bucket: Name of the user’s bucket
  • endpoint: The access domain name for the data center of the user’s bucket
  • object: The image object uploaded by the user to the OSS
  • image: The identifier reserved by Image Service
  • action: Operations by the user on images, such as scaling, cropping, and rotating
  • parame: Parameters corresponding to the operations by the user on images

For example:

  1. http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_100

custom style. Access Image Service anonymously using the third-level domain in the following format:

  1. http://bucket.<endpoint>/object?x-oss-process=x-oss-process=style/name
  • style: The identifier reserved by the system for the user’s custom style
  • name: Name of the custom style, that is, the rule name of the console-defined style

For example:

  1. http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=style/oss-pic-style-w-100

With the cascading processing, you can implement multiple operations on an image. The format is as follows:

  1. http://bucket.<endpoint>/object?x-oss-process=image/action,parame_value/action,parame_value/...

For example:

  1. http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_100/rotate,90

Image Service also supports HTTPS access. For example,

  1. https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_100

Authorized access

For objects with private permissions, as shown in the following table, you must be authorized to access Image Service.

Bucket permission Object permission
Private Default
Any permission Private

The Image Service URL code generated with signature is as follows:

  1. var OSS = require('ali-oss');
  2. var client = new OSS({
  3. accessKeyId: '<accessKeyId>',
  4. accessKeySecret: '<accessKeySecret>',
  5. bucket: '<bucketName>',
  6. endpoint: '<endpoint, such as http://oss-cn-hangzhou.aliyuncs.com>'
  7. });
  8. // Expire after 10 minutes. The image processing style is: "image/resize,w_300".
  9. var signUrl = client.signatureUrl('example.jpg', {expires: 600, 'process' : 'image/resize,w_300'});
  10. console.log("signUrl="+signUrl);

Note:

  • Authorized access supports custom styles, HTTPS, andcascading processing`
  • Expiration time (expires) is measured in seconds

SDK access

You can directly use SDK to access and process image objects with any ACLs.

Note:

  • The image object processing using SDKs supports custom styles, HTTPS, and cascading processing

Basic operations

Basic Image Service operations include obtaining image information, format conversion, scaling, cropping, rotating, effects, and watermarks.

  1. var OSS = require('ali-oss');
  2. var co = require('co');
  3. var client = new OSS({
  4. accessKeyId: '<accessKeyId>',
  5. accessKeySecret: '<accessKeySecret>',
  6. bucket: '<bucketName>',
  7. endpoint: '<endpoint, such as http://oss-cn-hangzhou.aliyuncs.com>'
  8. });
  9. // Scale
  10. co(function* () {
  11. var result = yield client.signatureUrl('example.jpg', {expires: 3600, process: 'image/resize,m_fixed,w_100,h_100'})
  12. }).catch(function (err) {
  13. console.log(err);
  14. });
  15. // Crop
  16. co(function* () {
  17. var result = yield client.signatureUrl('example.jpg', {expires: 3600, process: 'image/crop,w_100,h_100,x_100,y_100,r_1'})
  18. }).catch(function (err) {
  19. console.log(err);
  20. });
  21. // Rotate
  22. co(function* () {
  23. var result = yield client.signatureUrl('example.jpg', {expires: 3600, process: 'image/rotate,90'})
  24. }).catch(function (err) {
  25. console.log(err);
  26. });
  27. // Sharpen
  28. co(function* () {
  29. var result = yield client.signatureUrl('example.jpg', {expires: 3600, process: 'image/sharpen,100'})
  30. }).catch(function (err) {
  31. console.log(err);
  32. });
  33. // Watermark
  34. co(function* () {
  35. var result = yield client.signatureUrl('example.jpg', {expires: 3600, process: 'image/watermark,text_SGVsbG8g5Zu-54mH5pyN5YqhIQ'})
  36. }).catch(function (err) {
  37. console.log(err);
  38. });
  39. // Format conversion
  40. co(function* () {
  41. var result = yield client.signatureUrl('example.jpg', {expires: 3600, process: 'image/format,png'})
  42. }).catch(function (err) {
  43. console.log(err);
  44. });
  45. // Image information
  46. co(function* () {
  47. var result = yield client.signatureUrl('example.jpg', {expires: 3600, process: 'image/info})
  48. }).catch(function (err) {
  49. console.log(err);
  50. });

Custom styles

Note: You must first log on to the OSS console to add the custom style ‘example-style’.

  1. var OSS = require('ali-oss');
  2. var co = require('co');
  3. var client = new OSS({
  4. accessKeyId: '<accessKeyId>',
  5. accessKeySecret: '<accessKeySecret>',
  6. bucket: '<bucketName>',
  7. endpoint: '<endpoint, such as http://oss-cn-hangzhou.aliyuncs.com>'
  8. });
  9. // Custom styles
  10. co(function* () {
  11. var result = yield client.signatureUrl('example.jpg', {expires: 3600, process: 'style/example-sytle'})
  12. }).catch(function (err) {
  13. console.log(err);
  14. });

Cascading processing

  1. var OSS = require('ali-oss');
  2. var co = require('co');
  3. var client = new OSS({
  4. accessKeyId: '<accessKeyId>',
  5. accessKeySecret: '<accessKeySecret>',
  6. bucket: '<bucketName>',
  7. endpoint: '<endpoint, such as http://oss-cn-hangzhou.aliyuncs.com>'
  8. });
  9. // Cascading processing
  10. co(function* () {
  11. var result = yield client.signatureUrl('example.jpg', {expires: 3600, process: 'image/resize,m_fixed,w_100,h_100/rotate,90'})
  12. }).catch(function (err) {
  13. console.log(err);
  14. });

Image processing tools

  • The visualized image processing tool ImageStyleViever gives you an intuitive view of the OSS image processing results.
  • Demonstration pages of OSS Image Service features and usage.
Thank you! We've received your feedback.