使用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实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
简单的Vue异步组件实例Demo
Dec 27 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
javascript 高级语法之继承的基本使用方法示例
Nov 11 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 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安全的URL字符串base64编码和解码
2014/06/19 PHP
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
Python中断多重循环的思路总结
2019/10/04 Python
pytorch实现seq2seq时对loss进行mask的方式
2020/02/18 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
初三政治教学反思
2014/01/30 职场文书
聚美优品恶搞广告词
2014/03/14 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
销售开票员岗位职责
2015/04/15 职场文书
创业计划书之物流运送
2019/09/17 职场文书
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL