简介
本文档提供关于图片持久化处理的 API 概览以及 SDK 示例代码。
API | 说明 |
对象存储(Cloud Object Storage,COS)提供的上传时处理功能可以帮助使用者在上传时实现图片处理。此外能够对已存储在 COS 的图片进行相应处理操作,并将结果存入到 COS |
注意:
COS 小程序 SDK 版本需要大于等于 v1.5.0。
上传时使用图片处理
下面示例展示了如何在上传图片时自动实现图片处理。
图片上传完成后,COS 会存储原始图片和已处理过的图片。后续用户可以通过普通的下载请求获取处理结果。
示例代码
<view><button type="primary" bindtap="button">上传时使用图片处理</button></view>
Page({button: function () {wx.chooseMessageFile({count: 10,type: 'all',success: function (res) {var file = res.tempFiles[0];wxfs.readFile({filePath: file.path,success: function (res) {// sdk的引入及初始化cos请参考 https://cloud.tencent.com/document/product/436/31953cos.putObject({Bucket: 'examplebucket-1250000000', // Bucket 格式:test-1250000000,必填Region: 'COS_REGION', // Bucket所在地域,比如ap-beijing,必填Key: file.name, // 存储在桶里的对象键(例如1.jpg,a/b/test.txt),必填Body: res.data, // 上传文件对象,必填Headers: {// 通过 imageMogr2 接口使用图片缩放功能:指定图片宽度为 200,宽度等比压缩'Pic-Operations': JSON.stringify({is_pic_info: 1, // 固定值// fileid 设置和Key相同可实现上传后只保留处理后的图片而不保留原图// fileid 如果设置中文,需要经过URLEncode,比如 fileid: encodeURIComponent('图片.jpg')rules: [{ fileid: "desample_photo.jpg", rule: "imageMogr2/thumbnail/200x/" }],}),},},(err, data) => {console.log(err || data);},);},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/31953cos.request({Bucket: 'examplebucket-1250000000', // Bucket 格式:test-1250000000,必填Region: 'COS_REGION', // Bucket所在地域,比如ap-beijing,必填Key: '1.png', // 存储在桶里的对象键(例如1.jpg,a/b/test.txt),必填Method: 'POST', // 固定值Action: 'image_process', // 固定值Headers: {// 通过 imageMogr2 接口使用图片缩放功能:指定图片宽度为 200,宽度等比压缩'Pic-Operations': JSON.stringify({is_pic_info: 1, // 固定值// fileid 设置和Key相同可实现上传后只保留处理后的图片而不保留原图// fileid 如果设置中文,需要经过URLEncode,比如 fileid: encodeURIComponent('图片.jpg')rules: [{ fileid: "desample_photo.jpg", rule: "imageMogr2/thumbnail/200x/" }],}),},},(err, data) => {console.log(err || data);},);},});
下载时使用图片处理
下面示例展示了如何在下载图片时实现图片处理。
示例代码
<<view><button type="primary" bindtap="button">下载时使用图片处理</button></view>
Page({button: function () {// sdk的引入及初始化cos请参考 https://cloud.tencent.com/document/product/436/31953cos.getObject({Bucket: 'examplebucket-1250000000', // Bucket 格式:test-1250000000,必填Region: 'COS_REGION', // Bucket所在地域,比如ap-beijing,必填Key: '1.png', // 存储在桶里的对象键(例如1.jpg,a/b/test.txt),必填Query: {// 通过 imageMogr2 接口使用图片缩放功能:指定图片宽度为 200,宽度等比压缩'imageMogr2/thumbnail/200x/': '',}},(err, data) => {console.log(err || data);},);},});
生成带图片处理参数的签名 URL
下面示例展示了如何生成带图片处理参数的图片 url,一般使用这种 url 在浏览器里下载文件。
示例代码
<view><button type="primary" bindtap="sign">生成带图片处理参数的 URL,带签名</button><button type="primary" bindtap="unsign">生成带图片处理参数的 URL,不带签名</button></view>
// sdk的引入及初始化cos请参考 https://cloud.tencent.com/document/product/436/31953Page({sign: function () {// 生成带图片处理参数的文件签名 URL,过期时间设置为 30 分钟。cos.getObjectUrl({Bucket: 'examplebucket-1250000000', // Bucket 格式:test-1250000000,必填Region: 'COS_REGION', // Bucket所在地域,比如ap-beijing,必填Key: '1.png', // 存储在桶里的对象键(例如1.jpg,a/b/test.txt),必填Query: {// 通过 imageMogr2 接口使用图片缩放功能:指定图片宽度为 200,宽度等比压缩'imageMogr2/thumbnail/200x/': '',},Expires: 1800,Sign: true,},(err, data) => {if (data) {console.log(data.Url);}},);},unsign: function () {// 生成带图片处理参数的文件 URL,不带签名。cos.getObjectUrl({Bucket: 'examplebucket-1250000000', // Bucket 格式:test-1250000000,必填Region: 'COS_REGION', // Bucket所在地域,比如ap-beijing,必填Key: '1.png', // 存储在桶里的对象键(例如1.jpg,a/b/test.txt),必填Query: {// 通过 imageMogr2 接口使用图片缩放功能:指定图片宽度为 200,宽度等比压缩'imageMogr2/thumbnail/200x/': '',},Sign: false,},(err, data) => {if (data) {console.log(data.Url);}},);},});