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

最近的项目里面需要对书籍的封面进行处理，就是加一条阴影线形成书脊的凹凸感，然后将书脊切出，分成两部分，以便客户端实现打开动画。由于需要在服务器端处理，使用就研究使用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来重新定义坐标系统。

最后成果如下：

赞 (0)

相关推荐

  • Python图片裁剪实例代码(如头像裁剪)

    Python图片裁剪实例代码(如头像裁剪)

    今天就来说个常用的功能,图片裁剪,可用于头像裁剪啊之类的.用的还是我们之前用的哪个模块pillow 1. 安装pillow 用pip安装 pip install pillow 2. 图片裁剪 2.1 准备一张图片 2.2 我们使用的是Image中的crop(box)功能,它需要一个参数box,元组 类型,元组包括4个元素,如: (距离图片左边界距离x, 距离图片上边界距离y,距离图片左边界距离+裁剪框宽度x+w,距离图片上边界距离+裁剪框高度y+h) 如图:(x, y, x+w, y+h), x

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

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

    最近的项目里面需要对书籍的封面进行处理,就是加一条阴影线形成书脊的凹凸感,然后将书脊切出,分成两部分,以便客户端实现打开动画.由于需要在服务器端处理,使用就研究使用imagemagick来进行.同时准备封装了一个Node.js和Python的方法,主要还是讲一下然后使用imagemagick来对图片进行缩放.合成后进行裁剪吧. 首先素材文件如下(左边未处理封面,右边为需要合成上去的阴影): 安装ImageMagick的过程就不讲了,可以参考官网的安装方法:http://www.imagemagi

  • 利用javascript解决图片缩放及其优化的代码

    一个客户跟我联系说,刚给他做的网站,显示不正常,我顿时一紧张,这是我独立完成的第一个项目,于是赶紧打开他的网站看了看,没看出什么不正常来.我又问他怎么不正常,他说和交接项目时的效果不一样,晕,交接时要是不正常,项目肯定交接不了啊,干脆让他截个图过来.果然不正常,是他刚上传的一张图片把显示内容的窗口撑开了.查看代码,明明写好了max-width,怎么还会出现这种情况.突然发现他发来的图上,那个浏览器看着不顺眼,像是古老的而神圣的IE6!经过确认,果然是它,又是它!我真是疏忽,没给他在IE6下测试就

  • php使用imagick模块实现图片缩放、裁剪、压缩示例

    PHP 使用Imagick模块 缩放,裁剪,压缩图片 包括gif图片 缩放 裁剪 复制代码 代码如下: /**  * 图片裁剪  * 裁剪规则:  *   1. 高度为空或为零   按宽度缩放 高度自适应  *   2. 宽度为空或为零  按高度缩放 宽度自适应  *      3. 宽度,高度到不为空或为零  按宽高比例等比例缩放裁剪  默认从头部居中裁剪  * @param number $width  * @param number $height  */ public function

  • php初学者教程之图片缩放和裁剪

    php初学者教程之图片缩放和裁剪

    php程序中改变图片大小的函数大多数人都想到用imagecopyresized(),不过经过测试比较发现,使用imagecopyresampled()改变的图片质量更高. 1.imagecopyresampled的使用 1.目标函数资源 2.源图像资源<要采样的图片资源> 3.x(0,0指图左上角) 4.y(x,y确定一个坐标,坐标确定了把采样的部分放到目标图像资源的位置) 5.源x(0,0指图右上角) 6.源y(源x与源y确定一个坐标,你要采用的原图像资源的某个部分的起始位置) 7.w 8.

  • .Net Core基于ImageSharp实现图片缩放与裁剪

    前言 最近在做博客的时候,需要实现一个类似Lorempixel.LoremPicsum这样的随机图片功能,图片有了,还需要一个根据输入的宽度高度获取图片的功能,由于之前处理图片时使用到了ImageSharp库,所以这次我立刻就想到用它. 分析需求 图片库中的图片基本都是我之前收集的壁纸什么的,尺寸参差不齐,有横屏的也有竖屏 然后包装成接口只需要输入宽度和高度,就能随机选一张图片然后进行缩放或者裁剪 我的思路是: 横屏图片,将高度调整到与输入高度一致,宽度按比例调整 竖屏图片,将宽度调整到与输入高

  • .Net实现图片裁剪图片缩放及图片加水印详解

    .Net实现图片裁剪图片缩放及图片加水印详解

    目录 引言 (1)原图裁剪后的效果如下 (2)原图缩略后的效果如下 (3)原图加文字水印后的效果如下 (4)原图加图片水印后的效果如下 引言 图片的裁剪.缩放.与加水印,是任何系统经常要用到的功能,它们现已集成到IUtility工具中,使用十分简便.(具体代码将在文末给出,支持.NET/.NET Framework/.NET Core) 现给出一张“原图”,如下: (1)原图裁剪后的效果如下 裁剪的方法使用说明如下: <strong>PictureCut</strong> 声明:v

  • jQuery实现图片上传和裁剪插件Croppie

    jQuery实现图片上传和裁剪插件Croppie

    在很多应用需要上传本地图片然后再按尺寸适当裁剪以符合网站对图片尺寸的要求.最常见的就是各用户系统要求用户上传和裁剪头像的应用.今天我给大家介绍的是一款基于HTML5和jQuery的图片上传和裁剪插件,它叫Croppie. 运行效果图: HTML 首先我们将相关js和css文件载入head中. <script src="jquery.min.js"></script> <script src="croppie.min.js"><

  • java实现图片缩放、旋转和马赛克化

    本文是作者结合网上的一些资料封装的java图片处理类,支持图片的缩放,旋转,马赛克化. 不多说,上代码: package deal; import java.awt.Color; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Image; import java.awt.geom.AffineTransform; import java.awt.image.AffineTransformOp; impo

  • vue.js 实现图片本地预览 裁剪 压缩 上传功能

    以下代码涉及 Vue 2.0 及 ES6 语法. 目标 纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还是用上了 flash,第二篇来解释解释. 代码结构 <div id="wrap"> <label> 点我上传图片 <input type='file' @change="change" ref="input"> &

  • Java将图片组合成PDF文件的方法

    Java将图片组合成PDF文件的方法

    本文实例为大家分享了Java将图片组合成PDF文件的具体代码,供大家参考,具体内容如下 程序界面图: 代码清单: package 将图片组合成PDF文件; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.io.File; import java.io.FileFilter; import java.io.FileOutputStream; import java.io.IOE

随机推荐