图片生成居中缩略图的算法

最近在研究PHP,因为项目中需要使用到缩略图,缩略图如果不裁剪的话,你会发现图像变得奇形怪状,不利于排版。因此这里就简单介绍一下生成居中缩略图的想法:

一张图片480*800

现在我要裁剪成一张240*240的图片

类似于上面的这张。

1.首先我们需要计算缩放的时候是宽度优先还是高度优先,如果是像上面这样的就是宽度优先。

则缩放比例就是

ratio = image_width_dst/image_width_src

2.根据比例,缩小后的高度就是

image_height_pre = image_height_src *  ratio

3.获取了缩放后高的高度,再减去需要生成的高度,就是缩小后剩余的高度

image_height_rem = image_hieght_pre - image_height_dst

4.最后计算开始裁剪的地方

start_cut = image_height_rem  *  image_width_src/image_widtg_dst / 2

就上面的公式不好理解:

总结:

宽度优先的公式

开始裁剪的坐标 = (原图高  *  (目标图宽/原图宽) -目标图高) * (原图宽/目标图宽 ) / 2

高度优先的公式

开始裁剪的坐标 = (原图宽  *  (目标图高/原图高) -目标图宽) * (原图高/目标图高 ) / 2

难点:

当获取到裁剪剩余的高度的时候,还需要还原为原来图片的比例。

除以2,是为了居中,空出2端的位置

时间: 2024-10-10 07:30:41

图片生成居中缩略图的算法的相关文章

C#图片切割、图片压缩、缩略图生成

C#图片切割.图片压缩.缩略图生成的实现代码 /// 图片切割函数  /// </summary>  /// <param name="sourceFile">原始图片文件</param>  /// <param name="xNum">在X轴上的切割数量</param>  /// <param name="yNum">在Y轴上的切割数量</param>  ///

Java 实现图片等比例缩略图 (Thumbnailator + Jsp+SpringMVC)

Web应用为上传图片生成缩略图是常见的基本功能,通过缩略图生成提高了信息浏览时的性能,在保证用户使用体验的同时减少了数据传输量.本次以实例的方式,讲解如何使用使用Java实现图片等比例缩略图生成功能. 效果查看 代码编写 Thumbnailator 是一个为Java界面更流畅的缩略图生成库.从API提供现有的图像文件和图像对象的缩略图中简化了缩略过程,两三行代码就能够从现有图片生成缩略图,且允许微调缩略图生成,同时保持了需要写入到最低限度的代码量. 1.导入相关的包 2.配置web.xml we

利用FFmpeg生成视频缩略图 2.1.8

1.下载FFmpeg文件包,解压包里的\bin\下的文件解压到 D:\ffmpeg\ 目录下. 下载地址 http://ffmpeg.zeranoe.com/builds/win32/static/ D:\ffmpeg 目录追加到系统 PATH 环境变量中; 2.运行 copy_to_ffmpeg.bat, 把 echoc.exe LED_font.ttf 文件拷贝到 D:\ffmpeg\ 目录下. echoc.exe 在CMD控制台环境下输出彩色字符; LED_font.ttf 用于输出时间戳

利用FFmpeg生成视频缩略图 2.3.1

1.下载FFmpeg文件包,解压包里的\bin\下的文件解压到 D:\ffmpeg\ 目录下. 下载地址 http://ffmpeg.zeranoe.com/builds/win32/static/ D:\ffmpeg 目录追加到系统 PATH 环境变量中; 2.运行 copy_to_ffmpeg.bat, 把 echoc.exe LED_font.ttf 文件拷贝到 D:\ffmpeg\ 目录下. echoc.exe 在CMD控制台环境下输出彩色字符; LED_font.ttf 用于输出时间戳

[转] [C#] 解决生成的缩略图模糊的问题

一.问题场景 针对一张正方形图片生成 48px × 48px 的缩略图并保存为图片文件,但发现生成的缩略图很模糊. 生成的模糊的缩略图如下: 原始图片(300px × 300px, png格式): 代码中调用的是 System.Drawing.Image. GetThumbnailImage() 方法,主要实现代码如下: 1 private void SaveThumbnail(Bitmap bitmap, int width, int height, string directory, str

C#图片处理,缩略图制作

准备参数:图片文件流.文件名 方法:1.先将图片流通过System.Drawing.Image.FromStream方法转成图片对象 2.通过图片对象.GetThumbnailImage方法生成自定义长宽的缩略图. 生成方法: 缩略图生成: /// <summary> /// 缩略图 /// shidd /// </summary> /// <param name="myStream">文件流</param> /// <param

nginx+lua+GraphicsMagick生成实时缩略图-CentOS7

背景 大多数的系统都会涉及缩略图的处理,比如新闻系统和电商系统,特别是电商系统,每个商品大图都会对应一系列尺寸的缩略图用于不同业务场景的使用.部分系统也会生成不同尺寸的缩略图以供PC.手机端.ipad端使用. 解决方案探索: 直接加载原图,使用css样式表来控制图片的宽高.显然不太合适,大家也尽量不要这样做. web程序在上传成功后,同时生成相应缩略图.这种做法效率较低,如果遇到批量导入的业务时严重影响性能.并且同步生成缩略图会占用一定量的存储空间,如果能按需生成岂不更好? 使用七牛.阿里云提供

HTML5+CSS3鼠标移入移出图片生成随机动画

今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代码所代表含义,我这里就给出一些思路及关键代码: 1.首先使用ul li展现4张图片 本示例中不仅使用了图片,在图片表面还放置了一段“WEB”字样文字,用于与图片实现隐藏或显示效果,故html中每张图片上方加入: <div class="mytext">WEB</div&g

图片放大居中

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>图片放大</title> <meta name="description" content=&