使用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 打地鼠游戏代码说明
Oct 12 Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
移动端手指放大缩小插件与js源码
May 22 Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
JS实现li标签的删除
Apr 12 Javascript
ES6的解构赋值实例详解
May 06 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的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
Python实现的归并排序算法示例
2017/11/21 Python
在CentOS6上安装Python2.7的解决方法
2018/01/09 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
python实现中文文本分句的例子
2019/07/15 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
财务部出纳岗位职责
2013/12/22 职场文书
高中军训感想300字
2014/03/04 职场文书
《大海那边》教学反思
2014/04/09 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
2014年变电站工作总结
2014/12/19 职场文书
神龙架导游词
2015/02/11 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python