使用ImageMagick进行图片缩放、合成与裁剪(js+python)_javascript技巧

最近的项目里面需要对书籍的封面进行处理,就是加一条阴影线形成书脊的凹凸感,然后将书脊切出,分成两部分,以便客户端实现打开动画。由于需要在服务器端处理,使用就研究使用imagemagick来进行。同时准备封装了一个Node.js和Python的方法,主要还是讲一下然后使用imagemagick来对图片进行缩放、合成后进行裁剪吧。

首先素材文件如下(左边未处理封面,右边为需要合成上去的阴影):

安装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
其他按照方位进行

合成后效果如下:

最后就是图片的裁剪,将图片分为两部分,阴影部分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来重新定义坐标系统。

最后成果如下:

时间: 2024-11-01 16:23:05

使用ImageMagick进行图片缩放、合成与裁剪(js+python)_javascript技巧的相关文章

网页图片延时加载的js代码_javascript技巧

实现原理  把所有需要延时加载的图片改成如下的格式: <img lazy_src="图片路径" border="0"/> 然后在页面加载时,把所有使用了lazy_src的图片都保存到数组里,然后在滚动时计算可视区域的top,然后把延时加载的图片中top小于当前可视区域(即图片出现在可视区域内)的图片的src的值用lazy_src的来替换(加载图片) 代码 lazyLoad=(function() { var map_element = {}; var e

查看图片(前进后退)功能实现js代码_javascript技巧

注:images文件夹下图片的命名是从1~5.jpg有规律的 声明的 var array = [1, 2, 3, 4, 5]; 这个数组存放的是图片的名称 复制代码 代码如下: <head> <title></title> <script src="Jquery1.7.js" type="text/javascript"></script> <style type="text/css&quo

鼠标放在图片上显示大图的JS代码_javascript技巧

显示大图和隐藏大图的js代码: 复制代码 代码如下: <script type="text/javascript">   //显示图片   function over(imgid,obj,imgbig)   {//大图显示的最大尺寸  4比3的大小  400 300maxwidth=400;maxheight=300; //显示        obj.style.display="";        imgbig.src=imgid.src;      

JS简单的图片放大缩小的两种方法_javascript技巧

以左上角为定点,放大缩小,该点位置不变. 方法一: Html代码 复制代码 代码如下:    <script type="text/javascript">         //兼容IE和火狐   缩小放大.缩放         function ImageSuofang(args) {             var oImg = document.getElementById("oImg");             if (args) {     

关于微信上网页图片点击全屏放大效果_javascript技巧

实现微信上网页的图片点击后全屏还可以可以缩放,这个功能是别人做的,可是捏点击后屏幕直接黑屏了,图片没有显示出来.这个代码在网上搜一下,挺多类似的. 先上代码. function arrayToJson(o) { var r = []; if (typeof o == "string") return "\"" + o.replace(/([\'\"\\])/g, "\\$1").replace(/(\n)/g, "\

javaScript实现可缩放的显示区效果代码_javascript技巧

本文实例讲述了javaScript实现可缩放的显示区效果代码.分享给大家供大家参考,具体如下: 这里演示可缩放的显示区,采用JS代码实现,鼠标按住区域的右下角,出现拖放箭头时,向下或向上拉,就可实现缩放操作,当区域较小时显示滚动条,平时也比较常见的效果,在此将JavaScript代码与大家分享. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ksf-box-style-demo/ 具体代码如下: <HTML> <HEAD>

javascript实现图片延迟加载方法汇总(三种方法)_javascript技巧

看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较长的页面来说,这个方案是比较好的.原理是这样:页面可见区域以下的图片先不加载,等到用户向下滚动到图片位置时,再进行加载.这样做的好处在哪里?--当页面有好几屏内容时,有可能用户只看前几屏的内容,这样我们就可以只加载用户需要看的图片,减少服务器向用户浏览器发送图片文件所产生的负荷,下面通过三种方法给大家

多种js图片预加载实现方式分享_javascript技巧

图片预加载有大体有几种方式  1.html标签或css加载图片 显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载.但是为了避免初次载入过多图片影响体验.一般最好在文档渲染完成以后再加载(使用window.onload等).  2.纯js实现预加载 空城计-Code记的Javascript实现图片的预加载的完整实现的预加载实例为 function preloadimages(arr){ var newimages=[], loadedimages=

JS实现按比例缩放图片的方法(附C#版代码)_javascript技巧

本文实例讲述了JS实现按比例缩放图片的方法.分享给大家供大家参考,具体如下: js版本: function resizeImage(obj, MaxW, MaxH) { var imageObject = obj; var state = imageObject.readyState; if(state!='complete') { setTimeout("resizeImage("+imageObject+","+MaxW+","+MaxH+&