ピクセル単位のクロスブラウザイメージスケーリング

Question

スケール= 2.0でイメージをスケールアップしたいと思います。私はにを付けずにスムージングしたいので、元の画像の各ピクセルを同じ色の2x2ピクセルにすることが望ましいでしょう。

<canvas />タグに頼らずにクロスブラウザ（> = IE7）の方法でJavascript/CSSで行うことができるのだろうかと思います。

Answer 1

申し訳ありませんが、あなたが望む効果がキャンバスなしのクロスブラウザで可能であるとは思わないです。

キャンバスのFirefoxでは、ctx.mozImageSmoothingEnabled = false;を行うことができますが、それはあなたが得ようとしている限り近くです。

image-rendering: -moz-crisp-edges;は、CSSのスケーリングのためのFirefoxであなたを助けるかもしれない、と-ms-interpolation-mode *はIEであなたを助けるかもしれませんが、私はあなたがすべてのブラウザで同じに見えるソリューションを取得します疑います。

*これは廃止されました。

Answer 2

私はフラッシュが瀕死の技術であることを知っていますが、これはあなたがそれを確認したい場合は、かなり優れた画像操作スクリプトです。これは標準的なWebベースの画像処理では少し複雑ですが、邪悪なアイデアのように聞こえます！

Answer 3

レンダリング方法の詳細については、アンチエイリアス/スムージングは​​CSS 2.1のスコープ外です。だから、CSS 2.1の答えは「いいえ」です。 JSの画像オブジェクトにはスケーリング機能もありません。だから再び 'いいえ'。