使用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中的数字与字符串相加实例分析
Aug 14 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
JavaScript实现的简单拖拽效果
Jun 01 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
Oct 22 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
uniapp开发打包多端应用完整方法指南
Dec 24 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
NT IIS下用ODBC连接数据库
2006/10/09 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
Bootstrap框架安装使用详解
2017/01/21 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
vue 组件简介
2020/07/31 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
python基础教程之常用运算符
2014/08/29 Python
python使用any判断一个对象是否为空的方法
2014/11/19 Python
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
Python如何获取系统iops示例代码
2016/09/06 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
keras多显卡训练方式
2020/06/10 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
Python字符串及文本模式方法详解
2020/09/10 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
法学专业应届生求职信
2013/10/16 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
十佳少年事迹材料
2014/12/25 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书
Python 线程池模块之多线程操作代码
2021/05/20 Python