使用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 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
将查询条件的input、select清空
Jan 14 Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
jquery easyui validatebox remote的使用详解
Nov 09 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 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
destoon找回管理员密码的方法
2014/06/21 PHP
Javascript中的变量使用说明
2010/05/18 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
js取得url地址参数实例
2013/02/22 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
跟老齐学Python之编写类之三子类
2014/10/11 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
如何理解Python中包的引入
2020/05/29 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
RetroStage德国:复古服装
2019/02/03 全球购物
类的返射机制中的包及核心类
2016/09/12 面试题
计算机专业毕业生自我鉴定
2014/01/16 职场文书
校园开放日新闻稿
2015/07/17 职场文书
国庆节主题班会
2015/08/15 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python