JavaScript 中的图像缩放或 DOM 复制算法？

Question

原始问题：
如何在没有 CSS 支持的情况下在 JavaScript 中缩放图像？

我的团队有一个 STB 环境，有点像 EPG，它支持 JavaScript 和 DOM。 CSS 支持存在，但我们不能在那里注入我们自己的 CSS。测量单位始终是固定的，因此无法通过 CSS 进行缩放。

我们以以下方式显示图像：

1. 每个图像都显示为从 设备
2. 对于40 x 30 图像，它为我们提供1200 块1px x 1px， 表示为 DOM 元素。
3. 它们被放置在父 DOM 元素内的width x height 列和行中。它们在物理像素较大的大屏幕上看起来更大。

请看下面的图片 - 为了清楚起见，我在 浏览器 中尝试过：

假设上面的每个块本身都是一个 1 x 1 像素的图像，因此是一个 DOM 元素。一次总有 40 x 30 = 1200 个 DOM 元素。

我们想在函数调用中对其进行缩放，使其大小翻倍。或者至少在宽度和高度上增加 10 个单位。

我用 JavaScript 编写什么逻辑？我是否复制每个 DOM 元素并将副本放在原始元素旁边？这只会使宽度增加一倍。我也乘以4倍的高度吗？ 帮助表示赞赏。

更新：
从唯一的答案看来，我需要的是在 JavaScript 中实现缩放或复制算法。

当我们在任何操作系统中缩放图像时，它们对每个像素应用什么算法以使其大小翻倍并显示 1 个像素 x 4 个硬件像素？

我需要对 DOM 元素做同样的事情，其中​​每个 span 或 img 元素都充当一个像素。

Answer 1

据我所知，您仅限于两种选择：

• 单个 dom 像素大小的两倍
• 或者，如果这不可行，请将像素图缩放到 dom 像素数的两倍（因此将每个像素添加两次并在最后复制每一行）

当然，第一个选项是迄今为止最有效的选项，但您工作的环境似乎非常受限制，所以我认为这是不可能的。

Answer 2

如果您打算只使用图像，而不是像素，则该功能是现成的，

使用这个link

这可以毫无问题地提供最佳图像插值，

如果你想手动做，

然后在行中加倍，然后在列中，表示先水平，然后垂直加倍，

示例（3x3）

XCV
DFG
ERT

它将在第一行像素乘数中变成这个

XXCCVV
DDFFGG
EERRTT

然后是列像素乘数

XXCCVV
XXCCVV
DDFFGG
XXCCVV
EERRTT
XXCCVV

在这里，您可以在每行下方插入重复的行， 您可以在第一步中应用相同的方法，如果您正在创建矩阵，那么它将帮助您将每个相乘..

我希望这会有所帮助..