使用ImageMagick进行图片缩放、合成与裁剪(js+python)


Posted in Javascript onSeptember 16, 2013

最近的项目里面需要对书籍的封面进行处理,就是加一条阴影线形成书脊的凹凸感,然后将书脊切出,分成两部分,以便客户端实现打开动画。由于需要在服务器端处理,使用就研究使用imagemagick来进行。同时准备封装了一个Node.js和Python的方法,主要还是讲一下然后使用imagemagick来对图片进行缩放、合成后进行裁剪吧。

首先素材文件如下(左边未处理封面,右边为需要合成上去的阴影):

使用ImageMagick进行图片缩放、合成与裁剪(js+python)

安装ImageMagick的过程就不讲了,可以参考官网的安装方法:http://www.imagemagick.org/script/install-source.php

首先对封面图片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
其他按照方位进行

合成后效果如下:

使用ImageMagick进行图片缩放、合成与裁剪(js+python)

最后就是图片的裁剪,将图片分为两部分,阴影部分left.png和其他部分right.png:
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来重新定义坐标系统。

最后成果如下:

使用ImageMagick进行图片缩放、合成与裁剪(js+python)

Javascript 相关文章推荐
Javascript实现的分页函数
Feb 07 Javascript
循环 vs 递归浅谈
Feb 28 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
react结合bootstrap实现评论功能
May 30 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 Javascript
document.documentElement和document.body区别介绍
Sep 16 #Javascript
使用js在页面中绘制表格核心代码
Sep 16 #Javascript
Function.prototype.bind用法示例
Sep 16 #Javascript
javascript简单事件处理和with用法介绍
Sep 16 #Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
Sep 16 #Javascript
js window.print实现打印特定控件或内容
Sep 16 #Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 #Javascript
You might like
PHP base64+gzinflate压缩编码和解码代码
2008/10/03 PHP
深入解析php中的foreach问题
2013/06/30 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
原生js实现购物车
2020/09/23 Javascript
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
python简单区块链模拟详解
2019/07/03 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
python interpolate插值实例
2020/07/06 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
倡议书格式模板
2014/05/13 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
环保建议书作文400字
2015/09/14 职场文书
聘任合同书
2015/09/21 职场文书
MySQL为id选择合适的数据类型
2021/06/07 MySQL
mysql数据库如何转移到oracle
2022/12/24 MySQL