使用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 flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
js select常用操作控制代码
Mar 16 Javascript
在vs2010中调试javascript代码方法
Feb 11 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 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
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
举例讲解Python中的算数运算符的用法
2015/05/13 Python
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
Python生成器generator用法示例
2018/08/10 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
在keras中实现查看其训练loss值
2020/06/16 Python
python -v 报错问题的解决方法
2020/09/15 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
为什么要做架构设计
2015/07/08 面试题
会计学应届毕业生推荐信
2013/11/04 职场文书
实习生自我鉴定范文
2013/12/05 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
村道德模范事迹材料
2014/08/28 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
团员自我评价范文
2015/03/10 职场文书
写给老师的保证书
2015/05/09 职场文书
比赛主持人开场白
2015/05/29 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
导游词之神仙居景区
2019/11/15 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang