使用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 相关文章推荐
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 Javascript
jQuery获取同级元素的简单代码
Jul 09 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
vue中jsonp插件的使用方法示例
Sep 10 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 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在线生成ico文件的代码
2007/10/09 PHP
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
php 数据结构之链表队列
2017/10/17 PHP
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
2019/04/23 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
用Python写冒泡排序代码
2016/04/12 Python
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
Python多进程multiprocessing用法实例分析
2017/08/18 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
Django框架多表查询实例分析
2018/07/04 Python
python 异步async库的使用说明
2020/05/04 Python
python实现人工蜂群算法
2020/09/18 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
竞聘书格式及范文
2014/03/31 职场文书
法院信息化建设方案
2014/05/21 职场文书
宣传工作经验材料
2014/06/02 职场文书
文明寝室标语
2014/06/13 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server
Redis读写分离搭建的完整步骤
2021/09/14 Redis
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript