使用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 相关文章推荐
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
JS获取整个页面文档的实现代码
Dec 15 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
Vue+Vux项目实践完整代码
Nov 30 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
JS函数进阶之继承用法实例分析
Jan 15 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大文件分割上传 PHP分片上传
2017/08/28 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
Django中利用filter与simple_tag为前端自定义函数的实现方法
2017/06/15 Python
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
Python微信操控itchat的方法
2019/05/31 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
python实现智能语音天气预报
2019/12/02 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
Python字典实现伪切片功能
2020/10/28 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
海信商城:海信电视、科龙空调、容声冰箱官方专卖
2017/02/07 全球购物
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
开会迟到检讨书
2014/02/03 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
爱护公物演讲稿
2014/09/09 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP