使用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下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
简单了解JavaScript sort方法
Nov 25 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 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
2006/12/23 PHP
javascript,php获取函数参数对象的代码
2011/02/03 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
Yii全局函数用法示例
2017/01/22 PHP
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
利用python实现数据分析
2017/01/11 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
TensorFlow实现Logistic回归
2018/09/07 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
Python 发送邮件方法总结
2020/08/10 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
如何用python批量调整视频声音
2020/12/22 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
销售总监工作职责
2013/11/21 职场文书
投资意向书范本
2014/04/01 职场文书
2014年终工作总结范本
2014/12/15 职场文书
放弃遗产继承公证书
2015/01/26 职场文书
大二学年个人总结
2015/03/03 职场文书
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android
Python中request的基本使用解决乱码问题
2022/04/12 Python
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL