按区域调整图像大小

2023-12-14

我正在尝试编写一个javascript函数来根据给定区域(或者在我的情况下(有点不准确)“平均尺寸”)调整图像大小,因为这更容易思考。我想要的不是输入最大高度和宽度,而是以最大面积进给,以便长或窄的图像在视觉上看起来大小大致相同。

enter image description here

不过,我真的很困惑它的数学方面......只是如何逻辑它,因为我最近没有做太多数学。

基本上,给定长宽比,我想确定一个区域内的最大尺寸。

像这样的事情:

function resizeImgByArea(img, avgDimension){
    var w = $(img).width();
    var h = $(img).height();
    var ratio = w/h;
    var area = avgDimension * avgDimension;
    var targetHeight //something involving ratio and area
    var targetWidth //something involving ratio and area
    $(img).width(targetWidth);
    $(img).height(targetHeight);
}

不确定这是否是这里的主题,但我无法思考。


听起来您想将缩略图的像素限制为尽可能接近所有其他缩略图的平均区域,对吗?

基本上,给定原始图像的高宽比和目标区域 A:

h * w = original image's pixel size (let's got with 640x480 = 307,200 pixels)
A = maximum number of pixels allowed (let's go for 100x100 = 10,000 pixels)

307,200 / 10,000 = 30x reduction

original aspect ratio = 640 / 480 = 1.3333 : 1

要计算新缩略图的 x/y 大小:

newX * newY = 10000
newX = newY * 1.333
(newY * 1.333) * newY = 10000
newY^2 * 1.333 = 10000
newY^2 = 10000 / 1.333
newY^2 = 7502
newY = 86.6 -> 87
newX = 87 * 1.333 = 115.97 -> 116

116 x 87 = 10,092 pixels

如果我们对缩略图大小进行四舍五入,我们将得到 86x114 = 9,804 像素

所以...要将 640x480 图像转换为标准的 10,000 左右像素大小,您需要一个高度为 86-87 宽度为 114-116 的新图像大小。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

按区域调整图像大小 的相关文章

  • 如果对象包含在另一个数组中,则从数组中删除该对象

    我试图从数组中删除一个对象 如果该对象的属性 唯一 包含在另一个数组中 我知道我可以像这样执行嵌套 for 循环 for i 0 i lt array length i for j 0 j lt array2 length j if arr
  • 如何更改传单中功能集的样式?

    我正在看等值区域的例子 https leafletjs com examples choropleth https leafletjs com examples choropleth 这是他们使用的数据源 type Feature prop
  • 用隐藏单元格补充 colspanned 表格有什么不好吗?

    我一直在表格上开发一些排序和选择功能 我发现在具有跨单元格的表格中定位非常困难 我只是添加了跨区单元格并将其隐藏 它看起来不错 它与我的 js 一起工作 非常适合索引 但我想知道这是否是合法的方法 stuffing display none
  • 在Javascript中按降序对字符串进行排序(最有效)?

    W3Schools 有这个例子 var fruits Banana Orange Apple Mango fruits sort fruits reverse 这是在 Javascript 中按降序对字符串进行排序的最有效方法吗 Updat
  • 在网页上的文本框中键入内容时删除所有空格

    我如何在用户打字时即时删除输入到文本框中的空格 function var txt myTextbox var func function txt val txt val replace s g txt keyup func blur fun
  • jquery 验证错误位置

    这看起来很简单 但我无法弄清楚 我正在使用 jquery 验证插件 我验证所有文件 但我想要的是在输入文本行中显示验证消息警报 例如在电子邮件输入中 请填写电子邮件地址 但现在它出现在所有字段下 在我的html中
  • Jquery从下拉列表中获取所选值的id

    我有一个下拉列表 可以从数据库获取值 如下所示 get getJobs function jobs seljobs jobs var i 0 jobs forEach function n alert job id n id 32 67 4
  • jquery window.open 在 ajax 成功中被阻止

    尝试在我的 ajax 成功调用中打开一个新的浏览器窗口 但是 它被阻止为弹出窗口 我做了一些搜索 发现用户事件需要绑定到 window open 才能避免这种情况发生 我还找到了这个解决方案 您可以在 ajax 之前打开一个空白窗口 然后在
  • Node.js - console.log 不显示数组中的项目,而是显示 [Object]

    我在注销对象内数组的内容时遇到问题 实际的物体看起来像这样 var stuff accepted item1 item2 rejected response Foo envelope from The sender to new item1
  • 仅一页 JavaScript 应用程序

    您是否尝试过单页 Web 应用程序 即浏览器仅从服务器 获取 一页 其余部分由客户端 JavaScript 代码处理 此类 应用程序页面 的一个很好的例子是 Gmail 对于更简单的应用程序 例如博客和 CMS 使用这种方法有哪些优点和缺点
  • JavaScript 中数组的 HTML 数据列表值

    我有一个简单的程序 它必须从服务器上的文本文件中获取值 然后将数据列表填充为输入文本字段中的选择 为此 我想要采取的第一步是我想知道如何动态地将 JavaScript 数组用作数据列表选项 我的代码是
  • 在d3.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程
  • 将名称字符串编码为唯一的数字

    我有一大堆名字 数以百万计 他们每个人都有一个名字 一个可选的中间名和一个姓氏 我需要将这些名称编码为唯一代表这些名称的数字 编码应该是一对一的 即一个名称只能与一个数字相关联 一个数字只能与一个名称相关联 对此进行编码的明智方法是什么 我
  • 为什么“tbody”不设置表格的背景颜色?

    我在用 tbody 作为 CSS 选择器来设置background color在一个表中 我这样做是因为我有多个 tbody 表内的部分 它们具有不同的背景颜色 我的问题是 当使用border radius在细胞上 细胞不尊重backgro
  • JavaScript 代码在不使用 ActiveX 的情况下截取网站屏幕截图

    我有一个用户与之交互的 JavaScript 应用程序 我需要保存当前界面的外观 裁剪出我需要的部分 或者通过指定div只拍摄我需要的部分 然后发送回服务器 显然任何外部服务都无法做到这一点 我需要一个 JavaScript 或Flash
  • JavaScript onresize 事件多次触发

    我在尝试仅在触发 onresize 事件时运行一次函数时遇到一些麻烦 我已经看过这个问题DOM onresize 事件 https stackoverflow com questions 1500312 javascript onresiz
  • 数据表日期范围过滤器

    如何添加日期范围过滤器 like From To 我开始进行常规搜索和分页等工作 但我不知道如何制作日期范围过滤器 我正在使用数据表 1 10 11 版本 My code var oTable function callFilesTable
  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react
  • 使用异步调用时如何从 javascript 更新元刷新?

    我有一个系统 它使用元刷新来注销页面 该系统会在空闲用户后进行清理 不用担心 服务器也会导致会话超时 我开始通过 ajax 进行一些操作 不是真正的 xml 但这不是重点 我可以运行从异步请求返回的javascript 所以我想知道是否可以
  • 应用对数来导航树

    我曾经知道一种使用对数从树的一片叶子移动到树的下一个 有序 叶子的方法 我认为它涉及获取 当前 叶子的位置值 排名 并将其用作从根向下到新目标叶子的新遍历的种子 一直使用对数函数测试来确定是否沿着右或左节点向下到达叶子 我已经不记得如何运用

随机推荐

  • 如何将 NSString 初始化为带双引号的文本[重复]

    这个问题在这里已经有答案了 我想将 NSString 初始化为带双引号的 头发 可能吗 有什么帮助吗 但 NSString str hai 我想将其转换为 hai 而不直接初始化 有什么帮助吗 如果您想转换现有字符串 请使用以下命令 NSS
  • 将 R 中二项式 glm 的 cbind() 格式转换为具有单独行的数据帧

    按照此处的示例 R中二项式glm的输入格式 我有一个数据集y cbind success failure 每行代表一种治疗 我的问题是 如何将每个观察值转换为 二进制 格式 例如 每个观察值 y 0 或 1 工作示例在这里 df1 lt d
  • 使用 Retrofit 和 Gson 解析 JSON 数组响应

    这是来自 Web 服务的 JSONArray 响应 sponsors leg id NYL000067 type primary name AUBRY leg id NYL000171 type cosponsor name PERRY l
  • 如何修复 java.lang.NoSuchMethodError: sun.security.ssl.SSLSessionImpl

    应用程序通过读取jsf形式的参数来发送信件 我不明白为什么以及如何修复它 因为当您从开发环境运行时 一切正常 当我将应用程序放在 VPS 服务器上时 我收到下一个错误堆栈 尽管应用程序根据需要在本地主机上运行 StandardWrapper
  • 防止SQL注入的好方法有哪些? [复制]

    这个问题在这里已经有答案了 我必须为我的在职培训公司编写一个应用程序管理系统 前端将用 C 完成 后端将用 SQL 完成 我以前从未做过这种规模的项目 在学校里我们只学过有关 SQL 的基础课程 不知何故 我们的老师完全没有讨论SQL注入
  • 难道真的不能写一个在windows中隐藏密码的php cli密码提示吗?

    我花了几个小时试图找到一种在 php 中编写跨平台密码提示的方法 该提示隐藏用户输入的密码 虽然这可以通过使用 stty echo 在 Unix 环境中轻松完成 但我尝试了各种 passthru 和 system 调用方法来使 Window
  • Java-PLSQL-从java调用记录表

    PLSQL 包过程声明 TYPE custom type IS TABLE OF single rec type TYPE single rec type IS RECORD id name etc Problem 但custom type
  • 通过 Google Apps 脚本在日历上创建带有附件的活动

    我找不到向我的日历活动添加附件的方法 我希望应该有一个像下面的代码片段这样的简单方法 function createNewEvent var file DriveApp getFileById 1eqaThzYmTbZzP my file
  • System.Windows.Forms.WebBrowser 等待页面完全加载

    我一直在尝试很多不同的解决方案wait and async 似乎没什么作用 我无法找到实际上完全等待页面完全加载的解决方案 所有代码都在等待一段时间 但直到页面加载完毕 我在下一个过程中收到错误 我如何将示例代码设置为等待模式 直到Docu
  • 如何在Python上通过类名正确查找元素?硒相关

    我正在尝试自动化一个流程这一页 根据其html代码 点击该页面右上角的钱包按钮后 会部署4个主要钱包来选择登录该页面 所有这些钱包都属于同一类elements StyledListItem sc 197zmwo 0 QbTKh 我编写了下面
  • Visual C++ 代码无法在 Code::Blocks 中运行

    我当前使用以下代码从 C Dll 调用函数 该代码在 Visual C 中完美运行 include
  • 如何将两个增量语句放入 C++“for”循环中?

    我想增加两个变量for 循环条件而不是一个 所以像这样 for int i 0 i 5 i and j do something i j 这个的语法是什么 一个常见的习惯用法是使用逗号运算符它计算两个操作数 并返回第二个操作数 因此 for
  • 记录集 .value 属性

    请参阅下面的 DDL CREATE TABLE TestDate bookingdate datetime INSERT INTO TestDate VALUES 2013 10 04 请参阅下面的 ADODB 记录集 rs open SE
  • 在 JavaScript 中设置或更改 PHP 变量

    我是 PHP 和 JavaScript 的新手 我需要获取 div 的高度并将其分配给 PHP 变量 以便稍后可以将其用于进一步的处理 暂时是这样尝试的 不过效果不太好 div style height 1 some web form co
  • 为什么数组中的输入会覆盖每行的值[重复]

    这个问题在这里已经有答案了 我有这段代码 x 3 a x x 0 for i in range 0 x for j in range 0 x dt int input insert data a i j dt print a 它应该只在被要
  • 在 React 中管理多个音频源

    我有一个 React 组件 当您单击按钮时 它会播放 暂停音频 它效果很好 我一次在一个页面上渲染大约 5 个 但是 如果您单击一个音频的 播放 然后单击另一个音频的 播放 则两个音频都会播放 这不太好 这是我的组件代码 import Re
  • 在 R Markdown 中格式化表格以导出到 MS Word 文档

    我已经开始使用expss在 R Markdown 中 在 Knitr 的帮助下生成表格 我想自动生成需要以 Microsoft Word 格式准备的报告的表格和分析 当编织到 HTML 时 表格看起来很棒 Word 中的表格显示为纯文本行
  • 三元结构不等同于 if then else

    以下 if then 测试 在 bash 中 if 1 then ls undef dummy gt dev null 2 gt 1 else echo else stmt fi 似乎不等于它的三元版本 test 1 ls undef du
  • 停止秒表

    我在 JPanel 类中有以下代码 该代码被添加到另一个类 JFrame 中 我想要实现的是某种秒表程序 startBtn addActionListener new startListener class startListener im
  • 按区域调整图像大小

    我正在尝试编写一个javascript函数来根据给定区域 或者在我的情况下 有点不准确 平均尺寸 调整图像大小 因为这更容易思考 我想要的不是输入最大高度和宽度 而是以最大面积进给 以便长或窄的图像在视觉上看起来大小大致相同 不过 我真的很