4

元の質問:
CSS サポートなしで JavaScript で画像をスケーリングするにはどうすればよいですか?

私のチームには、JavaScript とそれにスローされる DOM をサポートする EPG のような STB 環境があります。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 要素があります。

関数呼び出しでこれをスケーリングして、サイズを 2 倍にしたいと考えています。または、少なくとも幅と高さの両方に 10 単位を追加します。

JavaScript でどのようなロジックを記述しますか? すべての DOM 要素を複製し、複製を元の要素の隣に配置しますか? 幅が2倍になるだけです。高さも4倍ですか？助けていただければ幸いです。

更新:
唯一の答えから、JavaScript でスケーリングまたは複製アルゴリズムを実装する必要があるようです。

OS で画像をズームするとき、すべてのピクセルにどのアルゴリズムを適用してサイズを 2 倍にし、1 ピクセル x 4 ハードウェア ピクセルで表示しますか?

spanすべての要素またはimg要素がピクセルとして機能する DOM 要素に対しても同じことを行う必要があります。

4

2 に答える 2

2

私が見る限り、あなたは2つのオプションに制限されています:

  • 個々の dom-pixels のサイズを 2 倍にするか
  • または、これが不可能な場合は、ピクセルマップを dom-pixel の 2 倍にスケーリングします (したがって、すべてのピクセルを 2 回追加し、最後に各行をコピーします)。

もちろん、最初のオプションが最も効率的ですが、あなたが作業している環境はかなり制限されているようですので、これは不可能だと思います.

于 2013-06-17T17:47:54.447 に答える
0

ピクセルではなく画像のみを使用する場合、関数はすぐに利用できます。

このリンクを使用してください

これにより、問題なく最適な画像補間が提供されます。

手動で行いたい場合は、

次に、行を2倍にしてから列を2倍にすると、最初に水平方向に2倍になり、次に垂直方向に2倍になります。

例(3x3)

XCV
DFG
ERT

最初の行ピクセル乗数でこれになります

XXCCVV
DDFFGG
EERRTT

次に、列ピクセル乗数

XXCCVV
XXCCVV
DDFFGG
XXCCVV
EERRTT
XXCCVV

ここでは、各行の下に重複行を挿入できます。最初のステップで適用できるのと同じです。マトリックスを作成している場合は、それぞれを乗算するのに役立ちます..

これが役立つことを願っています..

于 2013-06-24T05:09:20.427 に答える