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

简介:

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

一张图片480*800

wKioL1WQwCaQGkPPAAKRfEgF3mc371.jpg

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

wKioL1WQwGShBReHAACWxp1cPRw993.jpg

类似于上面的这张。


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端的位置





本文转自 rong341233 51CTO博客,原文链接:http://blog.51cto.com/fengwan/1668970



相关文章
|
3月前
|
JavaScript 算法 前端开发
JS懒加载 -- 适用于商城主页商品懒加载、图片懒加载,算法简单、易于理解、萌新福音
JS懒加载 -- 适用于商城主页商品懒加载、图片懒加载,算法简单、易于理解、萌新福音
18 0
|
8月前
|
机器学习/深度学习 编解码 算法
【阿里云OpenVI-视觉生产系列之图片上色】照片真实感上色算法DDColor ICCV2023论文深入解读
图像上色是老照片修复的一个关键步骤,本文介绍发表在 ICCV 2023 上的最新上色论文 DDColor
1866 10
【阿里云OpenVI-视觉生产系列之图片上色】照片真实感上色算法DDColor ICCV2023论文深入解读
|
算法
基于临近图片相似性分析的图片碎片拼接算法matlab仿真
基于临近图片相似性分析的图片碎片拼接算法matlab仿真
254 0
基于临近图片相似性分析的图片碎片拼接算法matlab仿真
|
存储 机器学习/深度学习 编解码
【阿旭机器学习实战】【19】如何在不减少分辨率的情况下降低图片存储空间?K-Means算法进行图片颜色点分类存储
【阿旭机器学习实战】【19】如何在不减少分辨率的情况下降低图片存储空间?K-Means算法进行图片颜色点分类存储
【阿旭机器学习实战】【19】如何在不减少分辨率的情况下降低图片存储空间?K-Means算法进行图片颜色点分类存储
|
前端开发 小程序 算法
【微信小程序】基于百度大脑人体检测、人脸识别以及调用阿里垃圾分类识别小程序利用canvas完成人脸画图、分割手部部分图片算法
【微信小程序】基于百度大脑人体检测、人脸识别垃圾分类人体出现在镜头里用红色框将人脸圈出来、用黄色框将手部圈出来,定时器触发后,通过百度返回的top+、left+、width+、height+将拍照的截图用canvas画出来,最后保存上传到阿里云垃圾分类识别检测博主用的是手部关键点识别,手部截取包括手肘部分,当出现手肘没有手掌时会出现截取不到目标的问题,目前解决办法:定时器设置时间长一点供演示员做好调整,另外就是出现手掌,可以尽量把掌心打开方便识别这样手肘部分就不会被检测到了在截取的时候canvas用不了..
260 0
【微信小程序】基于百度大脑人体检测、人脸识别以及调用阿里垃圾分类识别小程序利用canvas完成人脸画图、分割手部部分图片算法
ML之SSIM:基于输入图片RGB的三维向量利用SSIM(结构相似性度量)算法进行判别
ML之SSIM:基于输入图片RGB的三维向量利用SSIM(结构相似性度量)算法进行判别
ML之SSIM:基于输入图片RGB的三维向量利用SSIM(结构相似性度量)算法进行判别
|
算法 计算机视觉
ML之Cosin:基于输入图片RGB均值化转为单向vector利用Cosin(余弦相似度)算法进行判别
ML之Cosin:基于输入图片RGB均值化转为单向vector利用Cosin(余弦相似度)算法进行判别
ML之Cosin:基于输入图片RGB均值化转为单向vector利用Cosin(余弦相似度)算法进行判别
|
算法 计算机视觉
ML之Hash_HamMingDistance:基于输入图片哈希化(均值哈希+差值哈希)即8*8个元素的单向vector利用汉明距离算法进行判别
ML之Hash_HamMingDistance:基于输入图片哈希化(均值哈希+差值哈希)即8*8个元素的单向vector利用汉明距离算法进行判别
ML之Hash_HamMingDistance:基于输入图片哈希化(均值哈希+差值哈希)即8*8个元素的单向vector利用汉明距离算法进行判别
ML之Hash_EditDistance:基于输入图片哈希化(均值哈希+差值哈希)即8*8个元素的单向vector利用编辑距离算法进行判别
ML之Hash_EditDistance:基于输入图片哈希化(均值哈希+差值哈希)即8*8个元素的单向vector利用编辑距离算法进行判别
ML之Hash_EditDistance:基于输入图片哈希化(均值哈希+差值哈希)即8*8个元素的单向vector利用编辑距离算法进行判别
TF之DD:利用Inception模型+GD算法生成带背景的大尺寸、高质量的Deep Dream图片——五个架构设计思维导图
TF之DD:利用Inception模型+GD算法生成带背景的大尺寸、高质量的Deep Dream图片——五个架构设计思维导图
TF之DD:利用Inception模型+GD算法生成带背景的大尺寸、高质量的Deep Dream图片——五个架构设计思维导图

热门文章

最新文章