简介
本文档提供关于基础图片处理的相关的 API 概览以及 SDK 示例代码。
|
基础图片处理服务 | | 等比缩放、设定目标宽高缩放等多种方式 |
| | 普通裁剪、缩放裁剪、内切圆、人脸智能裁剪 |
| | 自适应旋转、普通旋转 |
| | 格式转换、GIF 格式优化、渐进显示 |
| | 针对 JPG 和 WEBP 图片进行质量变换 |
| | 对图片进行模糊处理 |
| | 对图片进行锐化处理 |
| 添加水印 | |
| 获取图片信息 | |
| | 包括 EXIF 信息 |
| | 快速实现图片格式转换、缩略、剪裁等功能,生成缩略图 |
水印的文字内容需要经过 URL 安全的 Base64 编码,可引入js-base64
来解决。
示例代码如下:
1. 项目内安装依赖
npm install --save js-base64
2. 代码里引入 encode 方法
import { encode } from 'js-base64';
var text = '腾讯云万象优图';
var safeBase64 = encode(text).replaceAll('+', '-').replaceAll('/', '_').replaceAll('=', '');
'Pic-Operations': `{"is_pic_info": 1, "rules": [{"fileid": "waterMask.jpg", "rule": "watermark/2/text/${safeBase64}"}]}`
上传时使用图片处理
下面示例展示了如何在上传图片时自动实现图片处理。
图片上传完成后,COS 会存储原始图片和已处理过的图片。后续用户可以通过普通的下载请求获取处理结果。
示例代码
<input id="fileSelector" type="file" />
<input id="submitBtn" type="submit" />
function handleFileInUploading(file) {
cos.putObject(
{
Bucket: 'examplebucket-1250000000',
Region: 'COS_REGION',
Key: file.name,
Body: file,
Headers: {
'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 = '未选择上传文件';
return;
}
handleFileInUploading(file);
};
对云上数据进行图片处理
下面示例展示了如何在对已存储在 COS 的图片进行相应处理操作,并将结果存入到 COS。
示例代码
<input id="submitBtn" type="submit" />
function handleFileInBucket() {
cos.request(
{
Bucket: 'examplebucket-1250000000',
Region: 'COS_REGION',
Key: 'exampleImage',
Method: 'POST',
Action: 'image_process',
Headers: {
'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();
};
下载时使用图片处理
下面示例展示了如何在下载图片时实现图片处理。
示例代码
<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);
},
);
}
生成带图片处理参数的签名 URL
示例代码
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);
}
},
);
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);
}
},
);
本页内容是否解决了您的问题?