使用ImageMagick进行图片缩放、合成与裁剪(js+python)
更新时间：2013年09月16日 11:13:22 作者：
由于需要在服务器端处理，使用就研究使用imagemagick来进行。同时准备封装了一个Node.js和Python的方法，主要还是讲一下然后使用imagemagick来对图片进行缩放、合成后进行裁剪吧
最近的项目里面需要对书籍的封面进行处理，就是加一条阴影线形成书脊的凹凸感，然后将书脊切出，分成两部分，以便客户端实现打开动画。由于需要在服务器端处理，使用就研究使用imagemagick来进行。同时准备封装了一个Node.js和Python的方法，主要还是讲一下然后使用imagemagick来对图片进行缩放、合成后进行裁剪吧。
首先素材文件如下（左边未处理封面，右边为需要合成上去的阴影）：
首先对封面图片file.png进行缩放，缩放到高度为1024，生成newfile.png方便与阴影图片合成，命令如下：
convert进行缩放的方法如下：
convert -resize 1024 file.jpg newfile.jpg
得到图片宽为1024，高根据原始图片比例计算而来
convert -resize x768 file.jpg newfile.jpg
得到的图片高位768，宽根据原始图片比例计算而来
convert -resize 1024×768! file.jpg newfile.jpg
固定宽高缩放，不考虑原是图宽高的比例，把图片缩放到指定大小。
convert -resize “1024×768>” file.jpg newfile.jpg
只有当src.jpg的宽大于1024或高大于768时候，才进行缩小处理，否则生成newfile.jpg和file.jpg具有一样的尺寸。
convert -resize “1024×768<” file.jpg newfile.jpg
只有当src.jpg的宽小于1024或高小于768时候，才进行放大处理，否则生成newfile.jpg和file.jpg具有一样的尺寸。
接下来就是将阴影文件合成到封面上（将yy.png从左上角合成到file.png生成newfile.png）：
这里主要解释一下-gravity参数：
-gravity northwest指右上角
如果要求在正中间，参数为center
如果要求在右下角，参数为southeast
其他按照方位进行
合成后效果如下：
left：convert file.png -gravity southwest -crop 31x1024+0+0 left.png
right：convert file.png -gravity southeast -crop 737x1024+0+0 right.png
裁剪方法的调整如下：
convert file.png -crop widthxheight+x+y newfile
其中widthxheight是目标图片的尺寸，+x+y是原始图片的坐标点，这两组值至少要出现一组，也可以同时存在。另外该命令也可使用gravity来重新定义坐标系统。
最后成果如下：
首先素材文件如下（左边未处理封面，右边为需要合成上去的阴影）：
首先对封面图片file.png进行缩放，缩放到高度为1024，生成newfile.png方便与阴影图片合成，命令如下：
复制代码 代码如下:
convert -resize x1024 file.png newfile.png
convert进行缩放的方法如下：
convert -resize 1024 file.jpg newfile.jpg
得到图片宽为1024，高根据原始图片比例计算而来
convert -resize x768 file.jpg newfile.jpg
得到的图片高位768，宽根据原始图片比例计算而来
convert -resize 1024×768! file.jpg newfile.jpg
固定宽高缩放，不考虑原是图宽高的比例，把图片缩放到指定大小。
convert -resize “1024×768>” file.jpg newfile.jpg
只有当src.jpg的宽大于1024或高大于768时候，才进行缩小处理，否则生成newfile.jpg和file.jpg具有一样的尺寸。
convert -resize “1024×768<” file.jpg newfile.jpg
只有当src.jpg的宽小于1024或高小于768时候，才进行放大处理，否则生成newfile.jpg和file.jpg具有一样的尺寸。
接下来就是将阴影文件合成到封面上（将yy.png从左上角合成到file.png生成newfile.png）：
复制代码 代码如下:
composite -gravity northwest yy.png file.png newfile.png
这里主要解释一下-gravity参数：
-gravity northwest指右上角
如果要求在正中间，参数为center
如果要求在右下角，参数为southeast
其他按照方位进行
合成后效果如下：
复制代码 代码如下:
left：convert file.png -gravity southwest -crop 31x1024+0+0 left.png
right：convert file.png -gravity southeast -crop 737x1024+0+0 right.png
裁剪方法的调整如下：
convert file.png -crop widthxheight+x+y newfile
其中widthxheight是目标图片的尺寸，+x+y是原始图片的坐标点，这两组值至少要出现一组，也可以同时存在。另外该命令也可使用gravity来重新定义坐标系统。
最后成果如下：
相关文章
这篇文章主要介绍了序列化模块json代码实例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-03-03
这篇文章主要介绍了JavaScript中提前声明变量或函数的例子,本文介绍的可以说是一种小技巧或者说一种特性,需要的朋友可以参考下2014-11-11
这篇文章主要介绍了js给selected添加options的方法,涉及javascript动态添加页面下拉列表selected的技巧,需要的朋友可以参考下2015-05-05
下面小编就为大家带来一篇常用Javascript函数与原型功能收藏(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
window对象的alert和confirm标准方法在不同浏览器的显示效果不太相同，有个相同点是都不是很美观。本文对此解决方法进行介绍：使用js和css分别仿照它们，提供另一套函数，使在不同浏览器的有着相同的体验效果。下面就跟小编一起来看下吧2016-12-12
本文主要介绍了Ajax基础知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了JavaScript实现邮箱后缀提示功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
这篇文章主要介绍了JS实现浏览器状态栏文字从右向左弹出效果,涉及JavaScript结合时间函数遍历字符串及动态改变状态栏显示效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
这篇文章主要介绍了微信小程序实现点击按钮修改文字大小功能,涉及微信小程序事件绑定及setData动态修改Page页面data数据,进而控制页面元素属性动态改变的相关操作技巧,需要的朋友可以参考下2017-12-12
JavaScript面试Module Federation实现原理详解
这篇文章主要为大家介绍了JavaScript面试Module Federation实现原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
最新评论