使用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 相关文章推荐
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 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
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
js TextArea的选中区域处理
2010/12/28 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
js中生成map对象的方法
2014/01/09 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
高职助产应届生自荐信
2013/09/24 职场文书
应聘美工求职信
2013/11/07 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
小学音乐教师个人工作总结
2015/02/05 职场文书
企业计划生育责任书
2015/05/09 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
赞美教师的句子
2019/09/02 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP