edit-icon download-icon

Image processing

Last Updated: Jul 12, 2018

Alibaba Cloud OSS provides image processing service featuring massive processing power, security, low costs, and high reliability.

By uploading and storing source images in OSS, you can process images anytime, anywhere, and on any Internet device through a simple RESTful interface.

The image processing offers image processing interfaces. For image uploads, use the OSS upload interfaces. You can build your own image processing service based on OSS image processing.

Image processing basic features

Image processing provides the following features:

Usage of image processing

Image processing 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 processing anonymously.

Bucket permission Object permission
Public-read or
Public-read-write
Default
Any permission Public-read or
Public-read-write
  • Access image processing anonymously using the third-level domain in the following format:

    1. http://bucket.<endpoint>/object?x-oss-process=image/action,param_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 to the OSS.

    • Image: The identifier reserved by the image processing.

    • Action: Operations on images, such as scaling, cropping, and rotating.

    • Parameter: Corresponding to the operations on the image.

      For example:

      1. http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_100
  • Custom style. Access image processing anonymously using the third-level domain in the following format:

    1. http://bucket.<endpoint>/object?x-oss-process=style/name
    • Style: The identifier reserved by the stem 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
  • Through Image Service access rules, 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 processing 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 processing:

Bucket permission Object permission
Private Default
Any permission Private

The image processing 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. // Expired for 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, and cascading processing.

  • Expiration time (expires) is measured in seconds.

SDK access

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

Note: Image object processing through SDK supports custom styles, HTTPS, and Image Service access rules.

Basic operations

Basic image processing operations include Retrieve dominant image tones, Format conversion, Resize images, Incircle, Adaptive orientation, Brightness and Add 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.get('example.jpg', './example-resize.jpg',
  12. {process: 'image/resize,m_fixed,w_100,h_100'});
  13. }).catch(function (err) {
  14. console.log(err);
  15. });
  16. // Crop
  17. co(function* () {
  18. var result = yield client.get('example.jpg', './example-crop.jpg',
  19. {process: 'image/crop,w_100,h_100,x_100,y_100,r_1'});
  20. }).catch(function (err) {
  21. console.log(err);
  22. });
  23. // Rotate
  24. co(function* () {
  25. var result = yield client.get('example.jpg', './example-rotate.jpg',
  26. {process: 'image/rotate,90'});
  27. }).catch(function (err) {
  28. console.log(err);
  29. });
  30. // Sharpen
  31. co(function* () {
  32. var result = yield client.get('example.jpg', './example-sharpen.jpg',
  33. {process: 'image/sharpen,100'});
  34. }).catch(function (err) {
  35. console.log(err);
  36. });
  37. // Watermark
  38. co(function* () {
  39. var result = yield client.get('example.jpg', './example-watermark.jpg',
  40. {process: 'image/watermark,text_SGVsbG8g5Zu-54mH5pyN5YqhIQ'});
  41. }).catch(function (err) {
  42. console.log(err);
  43. });
  44. // Format conversion
  45. co(function* () {
  46. var result = yield client.get('example.jpg', './example-format.jpg',
  47. {process: 'image/format,png'});
  48. }).catch(function (err) {
  49. console.log(err);
  50. });
  51. // Image information
  52. co(function* () {
  53. var result = yield client.get('example.jpg', './example-info.txt',
  54. {process: 'image/info'});
  55. }).catch(function (err) {
  56. console.log(err);
  57. });

Custom styles

Note: Go to the OSS console to add the custom style example-sytle before using the custom styles.

  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.get('example.jpg', './example-custom-style.jpg',
  12. {process: 'style/example-sytle"'});
  13. }).catch(function (err) {
  14. console.log(err);
  15. });

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.get('example.jpg', './example-cascade.jpg',
  12. {process: 'image/resize,m_fixed,w_100,h_100/rotate,90'});
  13. }).catch(function (err) {
  14. console.log(err);
  15. });

Image processing tools

  • Visualized image processing tool ImageStyleViewer can help you see the OSS image processing result intuitively.

  • Click here to go to the demonstration page of OSS image processing features and usage.

Thank you! We've received your feedback.