4

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

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

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

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

看看下面的图片 - 为了清楚起见，我在浏览器中尝试了一些东西：

像素表示

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

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

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

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

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

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

4

2 回答 2

2

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

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

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

于 2013-06-17T17:47:54.447 回答
0

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

使用这个链接

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

如果你想手动完成，

然后在行中加倍，然后在列中加倍，意味着首先水平，然后垂直加倍，

示例（3x3）

XCV
DFG
ERT

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

XXCCVV
DDFFGG
EERRTT

然后是列像素乘法器

XXCCVV
XXCCVV
DDFFGG
XXCCVV
EERRTT
XXCCVV

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

我希望这个能帮上忙..

于 2013-06-24T05:09:20.427 回答