GraphicsMagick实现云服务商基础图片处理

背景: 搭建图片处理服务的主要目的是为自研云存储提供图片处理能力,参考目前使用的云服务商阿里云、七牛云,搭建图片在线处理服务。本文手把手教会你使用GraphicsMagick工具实现云服务商提供的基础图片处理功能需求。

?? 注意事项

如果之前本地还没有安装GraphicsMagick的话,建议现在立刻马上安装一下,然后跟着本文一起玩转图片处理功能!

图片处理专栏

1、手把手教你本地安装GraphicsMagick

2、Springboot集成GraphicsMagick

常用功能&命令整理

图片缩放

gm convert ${sourceImgPath} -resize ${width}x${height}${mode} ${distImgPath} 

描述

通过图片缩放参数,调整图片大小。

参数解析

参数 定义
sourceImgPath 源图片路径
width 指定目标缩放图的宽度
height 指定目标缩放图的高度
mode ‘ ‘ [lfit](默认值):等比缩放,缩放图限制为指定w和h的矩阵内最大图片
‘^‘ [mfit]:等比缩放,缩放图为延伸出指定w与h的矩形框外的最小图片
‘!‘ [fixed]:固定宽高,强制缩放
‘%‘ [percent]:百分比缩放,将宽度和高度声明视为百分比值,而不是像素长度
distImgPath 目标图片路径

示例

example参考: https://help.aliyun.com/document_detail/44688.htm?spm=a2c4g.11186623.2.9.742df2eejHaW9d#concept-hxj-c4n-vdb
原图外网访问地址:https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg

GraphicsMagick实现云服务商基础图片处理

  • 等比缩放

    • 按宽高缩放

      • 图片缩放为宽高100px
      • 缩放模式为lfit
        图片处理命令:gm convert example.jpg -resize 100x100 test.jpg

      GraphicsMagick实现云服务商基础图片处理

      • 图片缩放为宽高100px
      • 缩放模式为mfit
        图片处理命令:gm convert example.jpg -resize 100x100^ test.jpg

      GraphicsMagick实现云服务商基础图片处理

  • 固定宽高缩放

    • 将原图缩放为宽高100px
    • 缩放模式为fixed
      图片处理命令:gm convert example.jpg -resize 100x100! test.jpg

    GraphicsMagick实现云服务商基础图片处理

  • 按比例缩放

    • 将原图缩放50%
      图片处理命令:gm convert example.jpg -resize 50% test.jpg

    GraphicsMagick实现云服务商基础图片处理

自适应方向

gm convert ${sourceImgPath} -auto-orient ${distImgPath}

描述

通过自适应方向参数指定原图是否按自适应方向旋转

备注: EXIF(Exchangeable Image File)是 “可交换图像文件” 的缩写,当中包含了专门为数码相机的照片而定制的元数据,可以记录数码照片的拍摄参数、缩略图及其他属性信息,简单来说,Exif 信息是镶嵌在 JPEG/TIFF 图像文件格式内的一组拍摄参数,需要注意的是 EXIF 信息是不支持 png,webp 等图片格式的。

参数解析

参数 定义
sourceImgPath 源图片路径
distImgPath 目标图片路径

示例

example参考: https://developer.qiniu.com/dora/kb/1560/information-about-photo-exif-rotation-parameters-in-the-understanding-of-orientation
原图外网访问地址:https://cvte-dev-public.seewo.com/shan-test/4354acf302f44722b905d289847c4d58

GraphicsMagick实现云服务商基础图片处理

  • 自适应旋转
    图片处理命令:gm convert example.png -auto-orient test.png

GraphicsMagick实现云服务商基础图片处理

质量变换

gm convert ${sourceImgPath} -quality ${q} ${distImgPath}

描述

使用原图本身的格式对图片进行压缩,通过质量变换参数,修改原图的质量。

参数解析

参数 定义
sourceImgPath 源图片路径
q 压缩比例,压缩后体积并不会严格按照比例缩小,取值为 [1, 100]
distImgPath 目标图片路径

example

gm convert example.png -quality 50 test.png

格式转换

gm convert ${sourceImgPath} ${distImgPath}.${format}

参数解析

直接设置图片后缀即可。

参数 定义
sourceImgPath 源图片路径
distImgPath 目标图片路径
format 图片后缀,如:jpg/jpeg/png/webp/bmp/gif/tiff

example

gm convert example.png test.jpg

自定义裁剪

gm convert ${sourceImgPath} -crop ${width}x${height}+${x}+${y} ${distImgPath}

描述

通过自定义裁剪参数,在原图上裁剪指定大小的矩形图片。

参数解析

参数 定义
sourceImgPath 源图片路径
width 指定裁剪宽度,[0, 图片宽度],默认为最大值
height 指定裁剪高度,[0, 图片高度],默认为最大值
x 指定裁剪起点横坐标(默认左上角为原点),[0, 图片边界]
y 指定裁剪起点纵坐标(默认左上角为原点),[0, 图片边界]
distImgPath 目标图片路径

示例

example参考: https://help.aliyun.com/document_detail/44693.html?spm=a2c4g.11186623.6.738.7df8390a36Vp9k
原图外网访问地址:https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg

GraphicsMagick实现云服务商基础图片处理

  • 从(100,50)开始,裁剪至图片边界

    • 裁剪起点为(100, 50)
    • 裁剪至图片边界:裁剪时默认使用w和h的最大值,所以可以忽略
      图片处理命令:gm convert example.jpg -crop +100+50 test.jpg

    GraphicsMagick实现云服务商基础图片处理

  • 从(100, 50)开始,裁剪 100px * 100px 大小的图片

    • 裁剪起点为(100, 50)
    • 裁剪范围 100px * 100px
      图片处理命令:gm convert example.jpg -crop 100x100+100+50 test.jpg

    GraphicsMagick实现云服务商基础图片处理

获取图片信息

gm identify -format ‘[output] %w %h %m %b\n‘ ${sourceImgPath}

描述

获取图片相关信息(宽高、格式、大小)。

参数解析

参数 定义
-format %w:宽度
%h:高度
%m:图片格式
%b:图片大小
sourceImgPath 源图片路径

example

图片处理命令:gm identify -format ‘[output] %w %h %m %b\n‘ example.jpg

输出:[output] 400 267 JPEG 21.3Ki

参考

1、阿里云图片处理指南:https://help.aliyun.com/document_detail/183902.html?spm=a2c4g.11186623.6.746.59677fd8jdjVGq

2、七牛云图片处理指南:https://developer.qiniu.com/dora/3683/img-directions-for-use

3、GM官方文档:http://www.graphicsmagick.org/utilities.html

4、ImageMagick命令:https://www.thisfaner.com/p/imagemagick/

GraphicsMagick实现云服务商基础图片处理

上一篇:前端数据结构


下一篇:Vue前端基础学习