数据万象
有奖：腾讯混元大模型征文大赛邀您参加！> HOT
文档中心>数据万象>SDK 文档>JavaScript SDK>图片处理>基础图片处理

基础图片处理

最近更新时间：2024-07-15 14:57:01

我的收藏

本页目录：

简介

腾讯云对象存储（Cloud Object Storage，COS）集成了 数据万象（Cloud Infinite，CI）专业的一体化多媒体解决方案，涵盖以下图片处理功能，详情可见 图片处理概述。
注意：
COS Javascript SDK 版本需要大于等于 v1.4.22。
功能
说明
缩放
等比缩放、设定目标宽高缩放等多种方式
裁剪
普通裁剪、缩放裁剪、内切圆、人脸智能裁剪
旋转
自适应旋转、普通旋转
格式转换、GIF 格式优化、渐进显示
针对 JPG 和 WEBP 图片进行质量变换
对图片进行模糊处理
亮度
调节图片亮度
对比度
调节图片对比度
锐化
对图片进行锐化处理
灰度图
将图片设置为灰度图
提供图片水印处理功能
提供文字水印处理功能
查询图片基本信息，包括格式、长、宽等
获取 EXIF 信息
获取图片主色调信息
可去除图片元信息，包括 exif 信息
快速实现图片格式转换、缩略、剪裁等功能，生成缩略图
可限制图片处理（例如缩放、压缩等）后的文件大小
实现对图片按顺序进行多种处理

使用方式

基础图片处理可通过以下三种方式实现，本文档内的demo仅提供对云上数据进行图片处理的方式，具体实现代码或其他实现方式可参考 图片持久化处理。
1. 上传时使用图片处理
2. 对云上数据进行图片处理
3. 下载时使用图片处理

缩放

功能说明

腾讯云数据万象通过 imageMogr2 接口提供图片缩放功能。处理图片原图大小不超过32MB、宽高不超过30000像素且总像素不超过2.5亿像素，处理结果图宽高设置不超过9999像素；针对动图，原图宽 x 高 x 帧数不超过2.5亿像素。

代码示例

// 以下为云上数据进行图片处理demo，其他方式demo或完整demo请参考图片持久化处理文档

const picOperations = JSON.stringify({
    is_pic_info: 1, // 固定
    // fileid 设置和Key相同可实现只保留处理后的图片而不保留原图
    // fileid 如果设置中文，需要经过URLEncode，比如 fileid: encodeURIComponent('图片.jpg')
    // rule 举例：缩放图片宽高为原图50%
    rules: [{ fileid: 'desample_photo.jpg', rule: 'imageMogr2/thumbnail/!50p/' }],
 });
// 对云上数据进行图片处理
cos.request(
  {
    Bucket: 'examplebucket-1250000000', // Bucket 格式：test-1250000000，必填
    Region: 'COS_REGION', // Bucket所在地域，比如ap-beijing，必填
    Key: '1.jpg', // 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必填
    Method: 'POST', // 固定值
    Action: 'image_process', // 固定值
    Headers: {
      'Pic-Operations': picOperations,
    },
  },
  function (err, data) {
    console.log(err || data);
  },
);

裁剪

功能说明

腾讯云数据万象通过 imageMogr2 接口提供裁剪功能，包括普通裁剪、缩放裁剪、内切圆裁剪、圆角裁剪和人脸智能裁剪。

代码示例

// 以下为云上数据进行图片处理demo，其他方式demo或完整demo请参考图片持久化处理文档

const picOperations = JSON.stringify({
    is_pic_info: 1, // 固定
    // fileid 设置和Key相同可实现只保留处理后的图片而不保留原图
    // fileid 如果设置中文，需要经过URLEncode，比如 fileid: encodeURIComponent('图片.jpg')
    // rule 举例：相对于图片左上顶点水平向右平移100像素，垂直向下平移10像素，指定目标图片大小为600×600进行裁剪
    rules: [{ fileid: 'desample_photo.jpg', rule: 'imageMogr2/cut/600x600x100x10' }],
 });
// 对云上数据进行图片处理
cos.request(
  {
    Bucket: 'examplebucket-1250000000', // Bucket 格式：test-1250000000，必填
    Region: 'COS_REGION', // Bucket所在地域，比如ap-beijing，必填
    Key: '1.jpg', // 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必填
    Method: 'POST', // 固定值
    Action: 'image_process', // 固定值
    Headers: {
      'Pic-Operations': picOperations,
    },
  },
  function (err, data) {
    console.log(err || data);
  },
);

旋转

功能说明

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

代码示例

// 以下为云上数据进行图片处理demo，其他方式demo或完整demo请参考图片持久化处理文档

const picOperations = JSON.stringify({
    is_pic_info: 1, // 固定
    // fileid 设置和Key相同可实现只保留处理后的图片而不保留原图
    // fileid 如果设置中文，需要经过URLEncode，比如 fileid: encodeURIComponent('图片.jpg')
    // rule 举例：顺时针旋转90度
    rules: [{ fileid: 'desample_photo.jpg', rule: 'imageMogr2/rotate/90' }],
 });
// 对云上数据进行图片处理
cos.request(
  {
    Bucket: 'examplebucket-1250000000', // Bucket 格式：test-1250000000，必填
    Region: 'COS_REGION', // Bucket所在地域，比如ap-beijing，必填
    Key: '1.jpg', // 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必填
    Method: 'POST', // 固定值
    Action: 'image_process', // 固定值
    Headers: {
      'Pic-Operations': picOperations,
    },
  },
  function (err, data) {
    console.log(err || data);
  },
);

格式转换

功能说明

腾讯云数据万象通过 imageMogr2 接口提供格式转换、gif 格式优化、渐进显示功能。

代码示例

// 以下为云上数据进行图片处理demo，其他方式demo或完整demo请参考图片持久化处理文档

const picOperations = JSON.stringify({
    is_pic_info: 1, // 固定
    // fileid 设置和Key相同可实现只保留处理后的图片而不保留原图
    // fileid 如果设置中文，需要经过URLEncode，比如 fileid: encodeURIComponent('图片.jpg')
    // rule 举例：将 jpg 格式的原图片转换为 png 格式
    rules: [{ fileid: 'desample_photo.jpg', rule: 'imageMogr2/format/png' }],
 });
// 对云上数据进行图片处理
cos.request(
  {
    Bucket: 'examplebucket-1250000000', // Bucket 格式：test-1250000000，必填
    Region: 'COS_REGION', // Bucket所在地域，比如ap-beijing，必填
    Key: '1.jpg', // 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必填
    Method: 'POST', // 固定值
    Action: 'image_process', // 固定值
    Headers: {
      'Pic-Operations': picOperations,
    },
  },
  function (err, data) {
    console.log(err || data);
  },
);

质量变换

功能说明

腾讯云数据万象通过 imageMogr2 接口对图片质量进行调节。

代码示例

// 以下为云上数据进行图片处理demo，其他方式demo或完整demo请参考图片持久化处理文档

const picOperations = JSON.stringify({
    is_pic_info: 1, // 固定
    // fileid 设置和Key相同可实现只保留处理后的图片而不保留原图
    // fileid 如果设置中文，需要经过URLEncode，比如 fileid: encodeURIComponent('图片.jpg')
    // rule 举例：设置绝对质量为60
    rules: [{ fileid: 'desample_photo.jpg', rule: 'imageMogr2/quality/60' }],
 });
// 对云上数据进行图片处理
cos.request(
  {
    Bucket: 'examplebucket-1250000000', // Bucket 格式：test-1250000000，必填
    Region: 'COS_REGION', // Bucket所在地域，比如ap-beijing，必填
    Key: '1.jpg', // 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必填
    Method: 'POST', // 固定值
    Action: 'image_process', // 固定值
    Headers: {
      'Pic-Operations': picOperations,
    },
  },
  function (err, data) {
    console.log(err || data);
  },
);

高斯模糊

功能说明

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

代码示例

// 以下为云上数据进行图片处理demo，其他方式demo或完整demo请参考图片持久化处理文档

const picOperations = JSON.stringify({
    is_pic_info: 1, // 固定
    // fileid 设置和Key相同可实现只保留处理后的图片而不保留原图
    // fileid 如果设置中文，需要经过URLEncode，比如 fileid: encodeURIComponent('图片.jpg')
    // rule 举例：imageMogr2/blur/8x5
    rules: [{ fileid: 'desample_photo.jpg', rule: 'imageMogr2/blur/8x5' }],
 });
// 对云上数据进行图片处理
cos.request(
  {
    Bucket: 'examplebucket-1250000000', // Bucket 格式：test-1250000000，必填
    Region: 'COS_REGION', // Bucket所在地域，比如ap-beijing，必填
    Key: '1.jpg', // 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必填
    Method: 'POST', // 固定值
    Action: 'image_process', // 固定值
    Headers: {
      'Pic-Operations': picOperations,
    },
  },
  function (err, data) {
    console.log(err || data);
  },
);

亮度

功能说明

腾讯云数据万象通过 imageMogr2 接口调节图片亮度。

代码示例

// 以下为云上数据进行图片处理demo，其他方式demo或完整demo请参考图片持久化处理文档

const picOperations = JSON.stringify({
    is_pic_info: 1, // 固定
    // fileid 设置和Key相同可实现只保留处理后的图片而不保留原图
    // fileid 如果设置中文，需要经过URLEncode，比如 fileid: encodeURIComponent('图片.jpg')
    // rule 举例：将图片亮度提高70
    rules: [{ fileid: 'desample_photo.jpg', rule: 'imageMogr2/bright/70' }],
 });
// 对云上数据进行图片处理
cos.request(
  {
    Bucket: 'examplebucket-1250000000', // Bucket 格式：test-1250000000，必填
    Region: 'COS_REGION', // Bucket所在地域，比如ap-beijing，必填
    Key: '1.jpg', // 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必填
    Method: 'POST', // 固定值
    Action: 'image_process', // 固定值
    Headers: {
      'Pic-Operations': picOperations,
    },
  },
  function (err, data) {
    console.log(err || data);
  },
);

对比度

功能说明

对比度指一幅图像中明暗区域最亮的白和最暗的黑之间不同亮度层级的测量，即指一幅图像灰度反差的大小。腾讯云数据万象通过 imageMogr2 接口调节图片对比度。

代码示例

// 以下为云上数据进行图片处理demo，其他方式demo或完整demo请参考图片持久化处理文档

const picOperations = JSON.stringify({
    is_pic_info: 1, // 固定
    // fileid 设置和Key相同可实现只保留处理后的图片而不保留原图
    // fileid 如果设置中文，需要经过URLEncode，比如 fileid: encodeURIComponent('图片.jpg')
    // rule 举例：将图片对比度降低50
    rules: [{ fileid: 'desample_photo.jpg', rule: 'imageMogr2/contrast/-50' }],
 });
// 对云上数据进行图片处理
cos.request(
  {
    Bucket: 'examplebucket-1250000000', // Bucket 格式：test-1250000000，必填
    Region: 'COS_REGION', // Bucket所在地域，比如ap-beijing，必填
    Key: '1.jpg', // 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必填
    Method: 'POST', // 固定值
    Action: 'image_process', // 固定值
    Headers: {
      'Pic-Operations': picOperations,
    },
  },
  function (err, data) {
    console.log(err || data);
  },
);

锐化

功能说明

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

代码示例

// 以下为云上数据进行图片处理demo，其他方式demo或完整demo请参考图片持久化处理文档

const picOperations = JSON.stringify({
    is_pic_info: 1, // 固定
    // fileid 设置和Key相同可实现只保留处理后的图片而不保留原图
    // fileid 如果设置中文，需要经过URLEncode，比如 fileid: encodeURIComponent('图片.jpg')
    // rule 举例：设置锐化参数为70，进行锐化处理
    rules: [{ fileid: 'desample_photo.jpg', rule: 'imageMogr2/sharpen/70' }],
 });
// 对云上数据进行图片处理
cos.request(
  {
    Bucket: 'examplebucket-1250000000', // Bucket 格式：test-1250000000，必填
    Region: 'COS_REGION', // Bucket所在地域，比如ap-beijing，必填
    Key: '1.jpg', // 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必填
    Method: 'POST', // 固定值
    Action: 'image_process', // 固定值
    Headers: {
      'Pic-Operations': picOperations,
    },
  },
  function (err, data) {
    console.log(err || data);
  },
);

灰度图

功能说明

对象存储通过数据万象 imageMogr2/grayscale 接口将图片设置为灰度图。

代码示例

// 以下为云上数据进行图片处理demo，其他方式demo或完整demo请参考图片持久化处理文档

const picOperations = JSON.stringify({
    is_pic_info: 1, // 固定
    // fileid 设置和Key相同可实现只保留处理后的图片而不保留原图
    // fileid 如果设置中文，需要经过URLEncode，比如 fileid: encodeURIComponent('图片.jpg')
    // rule 举例：将图片变为灰度图
    rules: [{ fileid: 'desample_photo.jpg', rule: 'imageMogr2/grayscale/1' }],
 });
// 对云上数据进行图片处理
cos.request(
  {
    Bucket: 'examplebucket-1250000000', // Bucket 格式：test-1250000000，必填
    Region: 'COS_REGION', // Bucket所在地域，比如ap-beijing，必填
    Key: '1.jpg', // 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必填
    Method: 'POST', // 固定值
    Action: 'image_process', // 固定值
    Headers: {
      'Pic-Operations': picOperations,
    },
  },
  function (err, data) {
    console.log(err || data);
  },
);

图片水印

功能说明

对象存储通过数据万象 watermark 接口提供图片水印处理功能。目前水印图片必须指定为已存储于数据万象绑定（或新建）的存储桶中的图片。关于图片水印等图片基础处理的限制说明，请参见 规则与限制。

代码示例

// 以下为云上数据进行图片处理demo，其他方式demo或完整demo请参考图片持久化处理文档

// 水印图url示例
const imgUrl = 'http://examplebucket-1250000000.cos.ap-shanghai.myqcloud.com/shuiyin_2.png';
// 经过安全base64编码 使用 COS.util.encodeBase64 方法需要sdk版本至少为1.4.19
const imgUrlBase64 = COS.util.encodeBase64(imgUrl, true);
// 生成一个在右下角的图片水印
const waterMarkRule = `watermark/1/image/${imgUrlBase64}/gravity/southeast`;
const picOperations = JSON.stringify({
    is_pic_info: 1, // 固定
    // fileid 设置和Key相同可实现只保留处理后的图片而不保留原图
    // fileid 如果设置中文，需要经过URLEncode，比如 fileid: encodeURIComponent('图片.jpg')
    rules: [{ fileid: 'desample_photo.jpg', rule: waterMarkRule }],
 });
// 对云上数据进行图片处理
cos.request(
  {
    Bucket: 'examplebucket-1250000000', // Bucket 格式：test-1250000000，必填
    Region: 'COS_REGION', // Bucket所在地域，比如ap-beijing，必填
    Key: '1.jpg', // 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必填
    Method: 'POST', // 固定值
    Action: 'image_process', // 固定值
    Headers: {
      'Pic-Operations': picOperations,
    },
  },
  function (err, data) {
    console.log(err || data);
  },
);
注意：
指定的水印图片必须同时满足如下3个条件：
水印图片与源图片必须位于同一个存储桶下。
URL 需使用 COS 域名（不能使用 CDN 加速域名，例如 examplebucket-1250000000.file.myqcloud.com/shuiyin_2.png 不可用 ），且需保证水印图可访问（如果水印图读取权限为私有，则需要携带有效签名）。
URL 必须以 http:// 开始，不能省略 HTTP 头，也不能填 HTTPS 头，例如 examplebucket-1250000000.cos.ap-shanghai.myqcloud.com/shuiyin_2.png，https://examplebucket-1250000000.cos.ap-shanghai.myqcloud.com/shuiyin_2.png 为非法的水印 URL。

文字水印

功能说明

对象存储通过数据万象 watermark 接口提供实时文字水印处理功能。处理图片原图大小不超过32MB、宽高不超过30000像素且总像素不超过2.5亿像素，处理结果图宽高设置不超过9999像素；针对动图，原图宽 x 高 x 帧数不超过2.5亿像素。

代码示例

// 以下为云上数据进行图片处理demo，其他方式demo或完整demo请参考图片持久化处理文档

// 文字水印示例
const text = '腾讯云万象优图';
const color = '#3D3D3D';
// 经过安全base64编码 使用 COS.util.encodeBase64 方法需要sdk版本至少为1.4.19
const textBase64 = COS.util.encodeBase64(text, true);
const colorBase64 = COS.util.encodeBase64(color, true);
// 生成一个文字水印
const waterMarkRule = `watermark/2/text/${textBase64}/fill/${colorBase64}/fontsize/20/dissolve/50/gravity/northeast/dx/20/dy/20/batch/1/degree/45`;
const picOperations = JSON.stringify({
    is_pic_info: 1, // 固定
    // fileid 设置和Key相同可实现只保留处理后的图片而不保留原图
    // fileid 如果设置中文，需要经过URLEncode，比如 fileid: encodeURIComponent('图片.jpg')
    rules: [{ fileid: 'desample_photo.jpg', rule: waterMarkRule }],
 });
// 对云上数据进行图片处理
cos.request(
  {
    Bucket: 'examplebucket-1250000000', // Bucket 格式：test-1250000000，必填
    Region: 'COS_REGION', // Bucket所在地域，比如ap-beijing，必填
    Key: '1.jpg', // 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必填
    Method: 'POST', // 固定值
    Action: 'image_process', // 固定值
    Headers: {
      'Pic-Operations': picOperations,
    },
  },
  function (err, data) {
    console.log(err || data);
  },
);

获取图片基本信息

功能说明

对象存储通过数据万象 imageInfo 接口查询图片基本信息，包括格式、长、宽等。

代码示例

cos.request(
  {
    Bucket: 'examplebucket-1250000000', // Bucket 格式：test-1250000000，必填
    Region: 'COS_REGION', // Bucket所在地域，比如ap-beijing，必填
    Key: '1.jpg', // 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必填
    Method: 'GET', // 固定值
    Action: 'imageInfo', // 固定值
    RawBody: true,  // 固定值
  },
  function (err, data) {
    if (data) {
      const imgInfo = JSON.parse(data.Body);
      console.log(imgInfo);
    }
  },
);

获取图片 EXIF

功能说明

EXIF（Exchangeable Image File）全称为可交换图像文件，可记录数码照片的拍摄参数、缩略图及其他属性信息。对象存储通过数据万象的 exif 接口获取 EXIF 信息。处理图片原图大小不超过32MB、宽高不超过30000像素且总像素不超过2.5亿像素，处理结果图宽高设置不超过9999像素；针对动图，原图宽 x 高 x 帧数不超过2.5亿像素。

代码示例

cos.request(
  {
    Bucket: 'examplebucket-1250000000', // Bucket 格式：test-1250000000，必填
    Region: 'COS_REGION', // Bucket所在地域，比如ap-beijing，必填
    Key: '1.jpg', // 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必填
    Method: 'GET', // 固定值
    Action: 'exif', // 固定值
    RawBody: true,  // 固定值
  },
  function (err, data) {
    if (data) {
      const imgInfo = JSON.parse(data.Body);
      console.log(imgInfo);
    }
  },
);

中国站
文档反馈
文档活动
message-icon联系我们
目录