简介
本文档提供关于图片持久化处理的 API 概览以及 SDK 示例代码。
注意:
COS Javascript SDK 版本需要大于等于 v1.4.22。
API | 说明 |
对象存储(Cloud Object Storage,COS)提供的上传时处理功能可以帮助使用者在上传时实现图片处理。此外能够对已存储在 COS 的图片进行相应处理操作,并将结果存入到 COS |
上传时使用图片处理
下面示例展示了如何在上传图片时自动实现图片处理。
图片上传完成后,COS 会存储原始图片和已处理过的图片。后续用户可以通过普通的下载请求获取处理结果。
示例代码
<!-- html 页面 DOM 元素 --><!-- 选择要上传的文件 --><input id="fileSelector" type="file" /><!-- 点击按钮上传 --><input id="submitBtn" type="submit" />
function handleFileInUploading(file) {// sdk的引入及初始化cos请参考 https://cloud.tencent.com/document/product/436/11459cos.putObject({Bucket: 'examplebucket-1250000000', // Bucket 格式:test-1250000000,必填Region: 'COS_REGION', // Bucket所在地域,比如ap-beijing,必填Key: file.name, // 存储在桶里的对象键(例如1.jpg,a/b/test.txt),必填Body: file, // 上传文件对象,可以是input[type="file"]标签选择本地文件后得到的file对象,必填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/" }],}),},},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。
示例代码
<!-- html 页面 DOM 元素 --><!-- 点击按钮请求对云上数据进行图片处理 --><input id="submitBtn" type="submit" />
function handleFileInBucket() {// sdk的引入及初始化cos请参考 https://cloud.tencent.com/document/product/436/11459cos.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/" }],}),},},function (err, data) {console.log(err || data);},);}document.getElementById('submitBtn').onclick = function (e) {handleFileInBucket();};
下载时使用图片处理
下面示例展示了如何在下载图片时实现图片处理。
示例代码
<!-- html 页面 DOM 元素 --><!-- 点击按钮下载文件并在下载时使用图片处理 --><input id="submitBtn" type="submit" />
function getObject() {// sdk的引入及初始化cos请参考 https://cloud.tencent.com/document/product/436/11459cos.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/': '',}},function (err, data) {// 获取到文件内容,一般使用下方生成带图片处理参数的签名 URL 的方式在浏览器中下载文件console.log(err || data);},);}
生成带图片处理参数的签名 URL
下面示例展示了如何生成带图片处理参数的图片 url,一般使用这种 url 在浏览器里下载文件。
示例代码
// sdk的引入及初始化cos请参考 https://cloud.tencent.com/document/product/436/11459// 生成带图片处理参数的文件 URL,带签名。cos.getObjectUrl({Bucket: 'examplebucket-1250000000', // Bucket 格式:test-1250000000,必填Region: 'COS_REGION', // Bucket所在地域,比如ap-beijing,必填Key: 'exampleobject', // 存储在桶里的对象键(例如1.jpg,a/b/test.txt),必填Query: {// 通过 imageMogr2 接口使用图片缩放功能:指定图片宽度为 200,宽度等比压缩'imageMogr2/thumbnail/200x/': ''},Sign: true, // url是否带签名,私有读必须带签名才可访问},function (err, data) {if (data) {// 使用浏览器打开url预览或触发浏览器下载console.log(data.Url);}},);// 生成带图片处理参数的文件 URL,不带签名。cos.getObjectUrl({Bucket: 'examplebucket-1250000000', // Bucket 格式:test-1250000000,必填Region: 'COS_REGION', // Bucket所在地域,比如ap-beijing,必填Key: 'exampleobject', // 存储在桶里的对象键(例如1.jpg,a/b/test.txt),必填Query: {// 通过 imageMogr2 接口使用图片缩放功能:指定图片宽度为 200,宽度等比压缩'imageMogr2/thumbnail/200x/': ''},Sign: false, // url是否带签名,公有读可以不带签名访问},function (err, data) {if (data) {// 使用浏览器打开 url 预览或触发浏览器下载console.log(data.Url);}},);