基础图片处理

简介

本文档提供关于基础图片处理的相关的 API 概览以及 SDK 示例代码。

水印的文字内容需要经过 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
'Pic-Operations': `{"is_pic_info": 1, "rules": [{"fileid": "waterMask.jpg", "rule": "watermark/2/text/${safeBase64}"}]}`

上传时使用图片处理

下面示例展示了如何在上传图片时自动实现图片处理。

图片上传完成后，COS 会存储原始图片和已处理过的图片。后续用户可以通过普通的下载请求获取处理结果。

示例代码

<!-- html 页面 DOM 元素 -->

<!-- 选择要上传的文件 -->
<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: {
        // 通过 imageMogr2 接口使用图片缩放功能：指定图片宽度为 200，宽度等比压缩
        '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。

示例代码

<!-- html 页面 DOM 元素 -->

<!-- 点击按钮请求对云上数据进行图片处理 -->
<input id="submitBtn" type="submit" />

function handleFileInBucket() {
  cos.request(
    {
      Bucket: 'examplebucket-1250000000',
      Region: 'COS_REGION',
      Key: 'exampleImage',
      Method: 'POST',
      Action: 'image_process',
      Headers: {
        // 通过 imageMogr2 接口使用图片缩放功能：指定图片宽度为 200，宽度等比压缩
        '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();
};

下载时使用图片处理

下面示例展示了如何在下载图片时实现图片处理。

示例代码

<!-- html 页面 DOM 元素 -->

<!-- 点击按钮下载文件并在下载时使用图片处理 -->
<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

示例代码

// 生成带图片处理参数的文件签名 URL，过期时间设置为 30 分钟。
cos.getObjectUrl(
  {
    Bucket: 'examplebucket-1250000000',
    Region: 'COS_REGION',
    Key: 'exampleobject',
    Query: {
        `imageMogr2/thumbnail/200x/`: ''
    },
    Expires: 1800,
    Sign: true,
  },
  function (err, data) {
    if (data) {
      // 使用浏览器打开url预览或触发浏览器下载
      console.log(data.URL);
    }
  },
);

// 生成带图片处理参数的文件 URL，不带签名。
cos.getObjectUrl(
  {
    Bucket: 'examplebucket-1250000000',
    Region: 'COS_REGION',
    Key: 'exampleobject',
    Query: {
      `imageMogr2/thumbnail/200x/`: ''
    },
    Sign: false,
  },
  function (err, data) {
    if (data) {
      // 使用浏览器打开url预览或触发浏览器下载
      console.log(data.URL);
    }
  },
);