This document provides an overview of APIs and SDK code samples related to basic image processing.
Service | Feature | Description |
---|---|---|
Basic image processing service | Scaling | Proportional scaling, scaling image to target width and height, and more |
Cropping | Cut (regular cropping), crop (scaling and cropping), iradius (inscribed circle cropping), and scrop (smart cropping) | |
Rotation | Adaptive rotation and common rotation | |
Format conversion | Format conversion, GIF optimization, and progressive display | |
Quality conversion | Changes the quality of images in JPG and WEBP formats | |
Gaussian blur | Blurs images | |
Sharpening | Sharpens images | |
Watermarking | Image watermarks, text watermarks | |
Obtaining image information | Basic information, EXIF data, average hue | |
Removing metadata | Includes EXIF data | |
Quick thumbnail template | Performs quick format conversion, scaling, and cropping to generate thumbnails |
The following example shows how to automatically process an image when you upload it to COS.
Upon successful upload, COS will save both the original and processed images. You can obtain the processing result using a common download request.
<!-- DOM element in the HTLM file -->
<!-- Choose an image to upload -->
<input id="fileSelector" type="file" />
<!-- Click the button to upload the image -->
<input id="submitBtn" type="submit" />
function handleFileInUploading(file) {
cos.putObject(
{
Bucket: 'examplebucket-1250000000',
Region: 'COS_REGION',
Key: file.name,
Body: file,
Headers: {
// Use the imageMogr2 API to scale the image (specifying the width of the output image to 200, with the height scaled automatically).
'Pic-Operations':
'{"is_pic_info": 1, "rules": [{"fileid": "desample_photo.jpg", "rule": "imageMogr2/thumbnail/200x/"}]}',
},
},
function (err, data) {
console.log(err || data);
},
);
}
document.getElementById('submitBtn').onclick = function (e) {
var file = document.getElementById('fileSelector').files[0];
if (!file) {
document.getElementById('msg').innerText = 'File to upload not selected';
return;
}
handleFileInUploading(file);
};
The following example shows how to process an in-cloud image and store the processing result in COS.
<!-- DOM element in the HTLM file -->
<!-- Click the button to process the in-cloud image -->
<input id="submitBtn" type="submit" />
function handleFileInBucket() {
cos.request(
{
Bucket: 'examplebucket-1250000000',
Region: 'COS_REGION',
Key: 'exampleImage',
Method: 'POST',
Action: 'image_process',
Headers: {
// Use the imageMogr2 API to scale the image (specifying the width of the output image to 200, with the height scaled automatically).
'Pic-Operations':
'{"is_pic_info": 1, "rules": [{"fileid": "desample_photo.jpg", "rule": "imageMogr2/thumbnail/200x/"}]}',
},
},
function (err, data) {
console.log(err || data);
},
);
}
document.getElementById('submitBtn').onclick = function (e) {
handleFileInBucket();
};
The following sample shows how to process an image upon the download:
<!-- DOM element in the HTLM file -->
<!-- Click the button to download and process the image -->
<input id="submitBtn" type="submit" />
function getObject() {
cos.getObject(
{
Bucket: 'examplebucket-1250000000',
Region: 'COS_REGION',
Key: 'exampleobject',
QueryString: `imageMogr2/thumbnail/200x/`,
},
function (err, data) {
console.log(err || data);
},
);
}
// Generate a signed URL (effective for 30 minutes) with image processing parameters.
cos.getObjectUrl(
{
Bucket: 'examplebucket-1250000000',
Region: 'COS_REGION',
Key: 'exampleobject',
Query: {
`imageMogr2/thumbnail/200x/`: ''
},
Expires: 1800,
Sign: true,
},
function (err, data) {
if (data) {
console.log(data.URL);
}
},
);
// Generate an unsigned URL with image processing parameters.
cos.getObjectUrl(
{
Bucket: 'examplebucket-1250000000',
Region: 'COS_REGION',
Key: 'exampleobject',
Query: {
`imageMogr2/thumbnail/200x/`: ''
},
Sign: false,
},
function (err, data) {
if (data) {
console.log(data.URL);
}
},
);
Was this page helpful?