【玩转腾讯云】腾讯云对象存储COS + 数据万象CI = 完善的图片解决方案

2020-03-31 11:00:41 浏览数 (1)

在日常开发当中，我们必然会遇到一些图片存储问题，例如用户头像、聊天发生的图片等，而这些图片资源存储是个问题，普遍做法都是直接落在服务器上进行存储，而我推荐的是图片资源的存储直接上云使用云存储，本地可以保留备份，读取数据走云存储，同时可以增加CDN等。

借助云存储空间单独存放网站中的图片或者其他静态文件，分离存储之后会方便网站的管理和打开速度效率。既然需要单独存储，存储资源提供方必须是靠谱的，比如腾讯云提供的对象存储 COS服务，下面来介绍一下COS服务

什么是对象存储

对象存储（Cloud Object Storage，COS）是由腾讯云推出的无目录层次结构、无数据格式限制，可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务，用户可通过网络随时存储和查看数据。腾讯云 COS 使所有用户都能使用具备高扩展性、低成本、可靠和安全的数据存储服务。

COS 的默认存储类型为标准存储，根据访问频度的高低提供四种对象的存储级别，这篇文章我们以标准存储为例，标准存储为用户提供了高数据持久性，高可用性、高性能的对象存储服务

虽然我们的图片存储在云上，但是我们依旧可以对图片数据进行一些云处理，例如加水印、裁剪，还可以进行鉴黄、鉴政、鉴暴恐等内容审核；

实际使用

演示一下怎么上传图片到COS中，以PHP SDK为例，首先进行安装

代码语言：txt复制
composer require qcloud/cos-sdk-v5

创建一个php文件，加载对应autoload.php文件进行自动加载

代码语言：txt复制
require __DIR__ . '/vendor/autoload.php';

初始化客户端，需要COS存储桶的地域、secretId和secretKey信息

代码语言：txt复制
$cosClient = new QcloudCosClient(
    array(
        'region' => '<Region>',
        'credentials' => array(
            'secretId' => '<SecretId>',
            'secretKey' => '<SecretKey>'
        )
    )
);

上传一张示例图片到COS存储桶中

代码语言：txt复制
try {
    $result = $cosClient->putObject(
        array(
            'Bucket' => $bucket, // 存储桶名称
            'Key' => "/images/bj.jpg", //上传到cos后的路径 名称
            'Body' => fopen("/images/bj.jpg", 'rb')
        )
    );
    print_r($result);
} catch (Exception $e) {
    echo "$en";
}

返回的$result['Location']就是我们上传到COS中的图片访问路径。至于其他的方法，可以参考腾讯云对象存储文档。

看到这里我们已经可以上传图片到COS当中，那么问题就来了，我们想要裁剪一下图片、加个水印呢？应该如何操作？

这个就不用考虑使用其他的服务API了，因为就在前不久腾讯云对象存储 COS 集成了数据万象，涵盖图片处理、审核、识别等功能，用户可以通过对应处理接口来进行媒体数据的处理操作，再也不是只把COS当做存储系统来使用。

什么是数据万象

数据万象（Cloud Infinite，CI）是腾讯云为客户提供的专业一体化的图片解决方案，涵盖图片上传、下载、存储、处理、识别等功能，将 QQ 空间相册积累的十年图片服务运作经验开放给开发者。

CI 可以根据用户的需求提供定制化的图片识别服务；同时也提供灵活的图像编辑服务，如裁剪、压缩、水印、转码等，满足各种业务场景需求。给所有用户提供了安全、稳定、高效的云端数据处理服务，满足媒体处理的多种需求。

实际使用

其实对于COS调用CI的基础图片处理，不需要使用代码实现，只需要拼接URL参数即可。前几天还有人问我腾讯云COS已经支持裁剪、压缩、水印等，插件啥时候支持呀，今天看了一下文档，这些操作实现是真的简单，下面来演示一下对应的操作

基础图片处理

基础图片处理的调用方式较为简单，不需要SDK，只需要拼接URL参数，具体文档：基础图片处理

  • 旋转

腾讯云数据万象通过imageMogr2接口提供旋转功能，包括普通旋转和自适应旋转。

我们使用刚才上传的那个图片地址$result['Location']来使用，在URL后加上?imageMogr2/rotate/30表示旋转30度

这里的操作需要注意一下，如果你的图片过大，在旋转90度、180度等浏览器可能无法显示出旋转的效果，可以把度数调的稍微不那么规范... 我测试的时候使用的是1920x1357的图片，90度180度没有效果，曾经以为是bug...度数调的随意些就有效果了

rotate.pngrotate.png

可以使用文档中的示例地址进行体验顺时针旋转90度

代码语言：txt复制
http://examples-1251000004.cos.ap-shanghai.myzijiebao.com/sample.jpeg?imageMogr2/rotate/90
  • 高斯模糊

腾讯云数据万象通过imageMogr2接口对图片进行模糊处理。

和刚才的操作一样，在URL后加上?imageMogr2/blur/8x5表示模糊半径取8，sigma 值取5，进行高斯模糊处理：

原图原图
模糊后模糊后

可以使用文档中的示例地址进行体验模糊半径取8，sigma 值取5，进行高斯模糊处理

代码语言：txt复制
http://examples-1251000004.cos.ap-shanghai.myzijiebao.com/sample.jpeg?imageMogr2/blur/8x5
  • 图片/文字水印

水印在日常使用的次数应该比较多，腾讯云数据万象也提供了对应的参数让用户进行调用。文档：图片水印、文字水印

腾讯云数据万象通过watermark接口提供图片水印和实时文字水印处理功能。

使用图片水印时，需要注意的是水印图片必须指定为已存储于数据万象中的图片；水印图片与源图片必须位于同一个存储桶下；水印图片地址需要经过 URL 安全的 Base64 编码。

可以使用文档中的示例地址进行体验图片水印

代码语言：txt复制
// 图片水印
http://examples-1251000004.cos.ap-shanghai.myzijiebao.com/sample.jpeg?watermark/1/image/aHR0cDovL2V4YW1wbGVzLTEyNTEwMDAwMDQucGljc2gubXlxY2xvdWQuY29tL3NodWl5aW4uanBn/gravity/southeast

// 文字水印
http://examples-1251000004.cos.ap-shanghai.myzijiebao.com/sample.jpeg?watermark/2/text/6IW-6K6v5LqRwrfkuIfosaHkvJjlm74/fill/IzNEM0QzRA/fontsize/20/dissolve/50/gravity/northeast/dx/20/dy/20/batch/1/degree/45
图片水印图片水印
文字水印文字水印
  • 管道操作符

看到这里那么问题来了，我如果需要同时缩放 增加水印应该如何操作呢？腾讯云数据万象的管道操作符|能够实现对图片按顺序进行多种处理。

用户在图片 URL 链接后以样式分隔符?与处理样式相连接，多个处理样式之间以管道操作符|分隔，样式按照先后顺序执行，目前最多支持三层管道。

这个示例其实就用到了管道操作符，因为我的原图较大，logo比较小，所以进行缩放后增加水印

图片水印图片水印
代码语言：txt复制
// 原图
http://examples-1251000004.cos.ap-shanghai.myzijiebao.com/sample.jpeg

// 先缩放50%
http://examples-1251000004.cos.ap-shanghai.myzijiebao.com/sample.jpeg?imageMogr2/thumbnail/!50p

// 使用管道操作符再添加文字水印的样式处理
http://examples-1251000004.cos.ap-shanghai.myzijiebao.com/sample.jpeg?imageMogr2/thumbnail/!50p|watermark/2/text/5pWw5o2u5LiH6LGh/fill/I0ZGRkZGRg==/fontsize/30/dx/20/dy/20

基础图片处理就说这么多，详细的可以参考基础图片处理哦，还有获取图片exif和去除元信息的一些接口，同样都是通过拼接URL可以使用的，而且图片基础处理目前免费，例如裁剪、缩放、转码、水印等功能。

当然，如果你不想拼接URL，敲这么多的字符串，腾讯云也帮你想到了：图片样式功能

1）在 存储桶列表 中对应桶的 图片处理 处添加。具体样式设置参考腾讯云文档。

2）填写时需要将分隔符和对应的名称或 描述进行拼接，例如：

分隔符为!(感叹号)，名称为blog，描述为 imageMogr2/format/webp/interlace/0/quality/100

则填写为 !blog 或 ?imageMogr2/format/webp/interlace/0/quality/100

最后复制对象地址并按以下格式在对象地址后面添加分隔符和样式名

代码语言：javascript复制
对象地址   分隔符   处理样式名

// https://examplebucket-1250000000.cos.ap-chengdu.myzijiebao.com/sample.jpeg!blog

或者添加对应样式参数

代码语言：javascript复制
对象地址   分隔符   处理样式参数

// https://examplebucket-1250000000.cos.ap-chengdu.myzijiebao.com/sample.jpeg?imageMogr2/format/webp/interlace/0/quality/100

以上就可以看出使用腾讯云对象存储COS和数据万象CI能够解决所有 App 和网站涉及到图片的地方，利用完善的图片解决方案，开发者既能快速地对外提供图片服务，也能基于云服务的弹性调度能力快速调整资源适应业务突然变化。

功能这么强大你还不赶紧去试试吗？更多功能等你发现~

对象存储 数据万象 cdn 云上实践

0 人点赞