Image processing

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:

• Getting image information
• Image format conversion
• Image scaling, cropping, and rotating
• Image effects
• Adding image, text, and text-and-image watermarks to images
• Customizing image processing styles, which are defined in Image Processing > Style Management in the console
• Calling multiple image processing features through Cascading Processing

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.

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

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:

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:

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:

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:

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

For example:

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,

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.

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

var OSS = require('ali-oss');
var client = new OSS({
  accessKeyId: '<accessKeyId>',
  accessKeySecret: '<accessKeySecret>',
  bucket: '<bucketName>',
  endpoint: '<endpoint, such as http://oss-cn-hangzhou.aliyuncs.com>'
});
// Expire after 10 minutes. The image processing style is: "image/resize,w_300".
var signUrl = client.signatureUrl('example.jpg', {expires: 600, 'process' : 'image/resize,w_300'});
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.

var OSS = require('ali-oss');
var co = require('co');
var client = new OSS({
  accessKeyId: '<accessKeyId>',
  accessKeySecret: '<accessKeySecret>',
  bucket: '<bucketName>',
  endpoint: '<endpoint, such as http://oss-cn-hangzhou.aliyuncs.com>'
});
// Scale
co(function* () {
  var result = yield client.signatureUrl('example.jpg', {expires: 3600, process: 'image/resize,m_fixed,w_100,h_100'})
}).catch(function (err) {
  console.log(err);
});
// Crop
co(function* () {
  var result = yield client.signatureUrl('example.jpg', {expires: 3600, process: 'image/crop,w_100,h_100,x_100,y_100,r_1'})
}).catch(function (err) {
  console.log(err);
});
// Rotate
co(function* () {
  var result = yield client.signatureUrl('example.jpg', {expires: 3600, process: 'image/rotate,90'})
}).catch(function (err) {
  console.log(err);
});
// Sharpen
co(function* () {
  var result = yield client.signatureUrl('example.jpg', {expires: 3600, process: 'image/sharpen,100'})
}).catch(function (err) {
  console.log(err);
});
// Watermark
co(function* () {
  var result = yield client.signatureUrl('example.jpg', {expires: 3600, process: 'image/watermark,text_SGVsbG8g5Zu-54mH5pyN5YqhIQ'})
}).catch(function (err) {
  console.log(err);
});
// Format conversion
co(function* () {
  var result = yield client.signatureUrl('example.jpg', {expires: 3600, process: 'image/format,png'})
}).catch(function (err) {
  console.log(err);
});
// Image information
co(function* () {
  var result = yield client.signatureUrl('example.jpg', {expires: 3600, process: 'image/info})
}).catch(function (err) {
  console.log(err);
});

Custom styles

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

var OSS = require('ali-oss');
var co = require('co');
var client = new OSS({
  accessKeyId: '<accessKeyId>',
  accessKeySecret: '<accessKeySecret>',
  bucket: '<bucketName>',
  endpoint: '<endpoint, such as http://oss-cn-hangzhou.aliyuncs.com>'
});
// Custom styles
co(function* () {
  var result = yield client.signatureUrl('example.jpg', {expires: 3600, process: 'style/example-sytle'})
}).catch(function (err) {
  console.log(err);
});

Cascading processing

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

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.