基础图片处理

最后更新时间:2021-05-27 16:25:13

    简介

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

    服务 功能 说明
    基础图片处理服务 缩放 等比缩放、设定目标宽高缩放等多种方式
    裁剪 普通裁剪、缩放裁剪、内切圆、人脸智能裁剪
    旋转 自适应旋转、普通旋转
    格式转换 格式转换、GIF 格式优化、渐进显示
    质量变换 针对 JPG 和 WEBP 图片进行质量变换
    高斯模糊 对图片进行模糊处理
    锐化 对图片进行锐化处理
    添加水印 图片水印文字水印
    获取图片信息 基本信息EXIF 信息主色调
    去除元信息 包括 EXIF 信息
    快速缩略模板 快速实现图片格式转换、缩略、剪裁等功能,生成缩略图

    上传时使用图片处理

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

    图片上传完成后,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();
    };

    对云上数据进行图片处理

    下面示例展示了如何在对已存储在 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',
      QueryString: `imageMogr2/thumbnail/200x/`,
      Expires: 1800,
      Sign: true,
    },
    function (err, data) {
      if (data) {
        console.log(data.URL);
      }
    },
    );
    // 生成带图片处理参数的文件 URL,不带签名。
    cos.getObjectUrl(
    {
      Bucket: 'examplebucket-1250000000',
      Region: 'COS_REGION',
      Key: 'exampleobject',
      QueryString: `imageMogr2/thumbnail/200x/`,
      Sign: false,
    },
    function (err, data) {
      if (data) {
        console.log(data.URL);
      }
    },
    );