使用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 - HTML的request类
Jan 09 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
javascript轮播图算法
Oct 21 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 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的cms
2010/12/19 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
php单例模式示例分享
2015/02/12 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
jQuery插件 tabBox实现代码
2010/02/09 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
使用ECharts实现状态区间图
2018/10/25 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
在漏洞利用Python代码真的很爽
2007/08/26 Python
Python的Django框架中的数据库配置指南
2015/07/17 Python
用Python写冒泡排序代码
2016/04/12 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
基于Python的OCR实现示例
2020/04/03 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
如何安装ruby on rails
2014/02/09 面试题
医生实习工作总结的自我评价
2013/09/27 职场文书
超市促销活动总结
2014/07/01 职场文书
家长学校培训材料
2014/08/20 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
工作保证书
2015/01/17 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书