使用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的console.log()用法小结
May 31 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 Javascript
Node.js实现文件上传
Jul 05 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
php下使用SimpleXML 处理XML 文件
2010/02/27 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
php测试kafka项目示例
2020/02/06 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
Python设计模式之观察者模式实例
2014/04/26 Python
python过滤字符串中不属于指定集合中字符的类实例
2015/06/30 Python
浅谈Python处理PDF的方法
2017/11/10 Python
Python工厂函数用法实例分析
2018/05/14 Python
python文字转语音实现过程解析
2019/11/12 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
vscode调试django项目的方法
2020/08/06 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
HTML5 Canvas绘制五星红旗
2016/05/04 HTML / CSS
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
古驰英国官网:GUCCI英国
2020/03/07 全球购物
工程资料员岗位职责
2015/04/13 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js
电频谱管理的原则是什么
2022/02/18 无线电
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python