使用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 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
js setTimeout opener的用法示例详解
Oct 23 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
js实现的类似于asp数据字典的数据类型代码实例
Sep 03 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 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
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
php 高性能书写
2010/12/11 PHP
PHP漏洞全解(详细介绍)
2012/11/13 PHP
深入解析php中的foreach函数
2013/08/31 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
vue插槽slot的理解和使用方法
2019/04/03 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
Python入门之modf()方法的使用
2015/05/15 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
Python requests模块cookie实例解析
2020/04/14 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
Python __slots__的使用方法
2020/11/15 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
临床医师专业个人自我评价范文
2013/11/07 职场文书
英语专业毕业生自我鉴定
2013/11/09 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
十八大宣传标语
2014/10/09 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
python的变量和简单数字类型详解
2021/09/15 Python
MySQL 数据类型详情
2021/11/11 MySQL
python数字图像处理之图像的批量处理
2022/06/28 Python
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS