简介
本文档提供关于图片压缩接口的相关的 API 概览以及 SDK 示例代码。
注意:
COS Javascript SDK 版本需要大于等于 v1.4.22。
上传时使用图片压缩
下面示例展示了如何在上传图片时自动实现图片压缩。
图片上传完成后,COS 会存储原始图片和已压缩过的图片。后续用户可以通过普通的下载请求获取处理结果。
示例代码
<!-- html 页面 DOM 元素 --><!-- 选择要上传的文件 --><input id="fileSelector" type="file" /><!-- 点击按钮上传 --><input id="submitBtn" type="submit" />
var config = {// 需要替换成您自己的存储桶信息Bucket: 'examplebucket-1250000000', /* 存储桶,必须 */Region: 'COS_REGION', /* 存储桶所在地域,必须字段 */};function handleFileInUploading(file) {cos.putObject({Bucket: config.Bucket,Region: config.Region,Key: file.name,Body: file,Headers: {// 通过 imageMogr2 接口进行 avif 压缩,可以根据需要压缩的类型填入不同的压缩格式:webp/heif/tpg/avif/svgc'Pic-Operations':'{"is_pic_info": 1, "rules": [{"fileid": "desample_photo.jpg", "rule": "imageMogr2/format/avif"}]}',},}, function (err, data) {logger.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" />
var config = {// 需要替换成您自己的存储桶信息Bucket: 'examplebucket-1250000000', /* 存储桶,必须 */Region: 'COS_REGION', /* 存储桶所在地域,必须字段 */};function handleFileInBucket() {cos.request({Bucket: config.Bucket,Region: config.Region,Key: 'exampleImage',Method: 'POST',Action: 'image_process',Headers: {// 通过 imageMogr2 接口进行 avif 压缩,可以根据需要压缩的类型填入不同的压缩格式:webp/heif/tpg/avif/svgc'Pic-Operations':'{"is_pic_info": 1, "rules": [{"fileid": "desample_photo.jpg", "rule": "imageMogr2/format/avif"}]}',},}, function (err, data) {logger.log(err || data);});}document.getElementById('submitBtn').onclick = function (e) {handleFileInBucket();};
下载时使用图片压缩
下面示例展示了如何在下载图片时实现图片压缩。
示例代码
<!-- html 页面 DOM 元素 --><!-- 点击按钮下载文件并在下载时使用图片处理 --><input id="submitBtn" type="submit" />
var config = {// 需要替换成您自己的存储桶信息Bucket: 'examplebucket-1250000000', /* 存储桶,必须 */Region: 'COS_REGION', /* 存储桶所在地域,必须字段 */};function getObject() {cos.getObject({Bucket: config.Bucket,Region: config.Region,Key: 'exampleobject',QueryString: `imageMogr2/format/avif`, // 可以根据需要压缩的类型填入不同的压缩格式:webp/heif/tpg/avif/svgc},function (err, data) {logger.log(err || data);},);}