使用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 字符串乘法
Aug 20 Javascript
jquery蒙版控件实现代码
Dec 08 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
Dec 31 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
spring+angular实现导出excel的实现代码
Feb 27 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 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缓存函数的使用说明
2013/05/10 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
在Python的Django框架中编写编译函数
2015/07/20 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
Python3.5实现的罗马数字转换成整数功能示例
2019/02/25 Python
python conda操作方法
2019/09/11 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
旅行社各个岗位职责
2014/03/15 职场文书
环保公益策划方案
2014/08/15 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书
网吧员工管理制度
2015/08/05 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL