合成动图

最近更新时间:2024-06-06 16:01:02

我的收藏

简介

本文档提供关于合成动图接口的相关的 API 概览以及 SDK 示例代码。
注意:
COS 小程序 SDK 版本需要大于等于 v1.5.0。
API
操作描述
将多张 jpg 或 png 格式的图片合成为一个 GIF 动图

上传时使用合成动图

下面示例展示了如何在上传图片时实现合成动图。
图片上传完成后,COS 会存储原始图片和已完成合成动图的图片。后续用户可以通过普通的下载请求获取处理结果。

示例代码

<view>
<button type="primary" bindtap="button">上传时使用合成动图</button>
</view>
Page({
button: function () {
const config = {
// 需要替换成您自己的存储桶信息
Bucket: 'examplebucket-1250000000', /* 存储桶,必须 */
Region: 'COS_REGION', /* 存储桶所在地域,必须字段 */
};
wx.chooseMessageFile({
count: 2,
type: 'all',
success: function (res) {
var file = res.tempFiles[0];
wxfs.readFile({
filePath: file.path,
success: function (res) {
cos.putObject(
{
Bucket: config.Bucket, // Bucket 格式:test-1250000000
Region: config.Region,
Key: file.name,
Body: res.data,
Headers: {
'Pic-Operations':
'{"is_pic_info": 1, "rules": [{"fileid": "exampleobject", "rule": "imageMogr2/animate/duration/10/images/<imageurl1>"}]}',
},
},
requestCallback,
);
},
fail: (err) => console.error(err),
});
},
fail: (err) => console.error(err),
});
},
});


对云上数据进行合成动图

下面示例展示了如何在对已存储在 COS 的图片进行相应处理操作,并将结果存入到 COS。

示例代码

<view>
<button type="primary" bindtap="button">对云上数据进行合成动图</button>
</view>
Page({
button: function () {
// sdk的引入及初始化cos请参考 https://cloud.tencent.com/document/product/436/31953
const config = {
// 需要替换成您自己的存储桶信息
Bucket: 'examplebucket-1250000000', /* 存储桶,必须 */
Region: 'COS_REGION', /* 存储桶所在地域,必须字段 */
};
cos.request(
{
Bucket: config.Bucket,
Region: config.Region,
Key: '1.jpeg',
Method: 'POST',
Action: 'image_process',
Headers: {
'Pic-Operations':
'{"is_pic_info": 1, "rules": [{"fileid": "exampleobject", "rule": "imageMogr2/animate/duration/10/images/<imageurl1>"}]}',
},
},
requestCallback,
);
},
});

下载时使用合成动图

下面示例展示了如何在下载图片时实现合成动图。

示例代码

<view>
<button type="primary" bindtap="button">下载时使用合成动图</button>
</view>
Page({
button: function () {
// sdk的引入及初始化cos请参考 https://cloud.tencent.com/document/product/436/31953
const config = {
// 需要替换成您自己的存储桶信息
Bucket: 'examplebucket-1250000000', /* 存储桶,必须 */
Region: 'COS_REGION', /* 存储桶所在地域,必须字段 */
};
cos.getObject(
{
Bucket: config.Bucket,
Region: config.Region,
Key: '1.png',
QueryString: `imageMogr2/animate/duration/10/images/<imageurl1>`,
},
requestCallback,
);
},
});