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个像素乘以4个硬件像素？

我需要对DOM元素执行相同的操作，其中每个span或img元素都充当像素。

Answer 1

据我所知，你只限于两个选择：

• 双倍大小的单个dom像素
• 或者，如果无法做到这一点，请将像素图的比例调整为dom像素数的两倍（因此请将每个像素添加两次并在末尾复制每一行）

当然，第一个选项是迄今为止效率最高的选项，但看起来你正在使用的环境是非常严格的，所以我认为这是不可能的。

Answer 2

如果您打算仅使用图像，而不是像素，则该功能随时可用，

使用此link

这提供了没有任何问题的最佳图像插值，

如果您想手动完成，

然后在行中加倍，然后在列中加倍，首先是水平，然后是垂直加倍，

实施例（3×3）

XCV
DFG
ERT

它将成为第一行像素倍增器

XXCCVV
DDFFGG
EERRTT

然后列-pix乘数

XXCCVV
XXCCVV
DDFFGG
XXCCVV
EERRTT
XXCCVV

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

我希望这会有所帮助..