24

CSSzoomプロパティを使用する場合、「バイリニア」やその他の高度なズーム アルゴリズムではなく、ブラウザに「最近傍」を使用させるにはどうすればよいですか?

私の設定はキャンバスを含むdivであり、divはJavaScriptを介してズームセットを取得し、CSSで<div style="zoom:3200%">...</div>使用している最近傍を取得します。image-rendering: -webkit-optimize-contrastアプリはこちらから入手できます(「z」でズームイン、「shift-z」でズームアウト)、CSS はこちら

OSX 上の Chrome での目的の効果は次のとおりです (ズームは 3200% に設定されています)。 最近傍を使用して OSX/Chrome でズーム

しかし、これは Windows 7 の Chrome でも同じです。 最近傍を使用しない Windows/Chrome でのズーム

どちらの場合も、すぐに使用できる「バニラ」Chrome (バージョン 15.xx) であり、実験的なフラグはオンになっていません。

Windows で Chrome に最近傍を使用させるにはどうすればよいですか? さらに言えば、どうすればすべてのブラウザを納得させることができるでしょうか? Safari も最近傍を使用しません (これまでのところ、このアプリは WebKit ベースのブラウザーでのみ動作します)

CSSimage-renderingプロパティは Chrome/OSX に影響し、望ましい効果が得られます。しかし、Chrome/Windows と Safari(5.1)/OSX はどちらもそれを完全に無視しているようです。運が悪いだけだと何かが教えてくれますが、聞いてみようと思いました。

div コンテナーでの使用zoomは非常にシンプルで、Chrome/OSX で美しく機能します。キャンバスを内部でスケーリングする必要がある場合は、それも可能です。しかし、可能であれば、文字通り1行のコードソリューションを好むでしょう!

更新: ヘルプの使用を発見しましたimage-rendering: optimizeSpeed。ただし、Chrome/Windows では気難しいようです。あまりにも多くの要素 (最初に試したコンテナとすべてのキャンバス) に設定すると、効果がありません。しかし、これをちょうど に適用するとcanvas、98% の結果が得られます。

今私の問題は、ズームイン中に初めて描画することです。それは完全に機能し、他のすべての後続の描画アクションは実行中にぼやけ、その後正しい最近傍に戻ります(私のアプリは最初にスクラッチキャンバスに描画し、次に描画を実際のキャンバスに適用します)。Chrome がバイリニアの使用を主張するスクラッチ キャンバスには奇妙な点があります。掘り下げれば解決できると思います。

UPDATE2:image-rendering Chrome/Windows ではうまく実装されておらず、少しバグがあるようです。値optimizeSpeedとoptimizeQualityが Chrome/Windows でサポートされていないことを確認できました。それらに画像レンダリングを設定すると、Chrome はその設定を無視します。Chrome/Windows は を認識しますが-webkit-optimize-contrast、一貫して使用するとは限りません。Chrome は、バイリニア スケーリング アルゴリズムと思われるアルゴリズムと最近傍アルゴリズムの間をほぼランダムに切り替えます。Chrome に最近傍を常に使用させることができませんでした。

Windows で Chromium 17 のビルドを試してみましたが、同じように動作します。

Firefox (8.0.1) は非常に有望に見えますが、非常に優れているように見え-moz-crisp-edgesます。当初、私はこのアプリの「理想的なブラウザ」として Chrome をターゲットにしていましたが、Firefox に切り替えるだけかもしれません。

最終的に、適切なサポートimage-renderingが Chrome のパイプラインにあるようですが、まだ完全ではありません。WebKit 自体は、すべての画像レンダリング値を完全にサポートしていると主張していますが、Chrome が使用する WebKit のビルドは、この新しい修正に完全には更新されていないと思います。

4

3 に答える 3

14

やり方がある。私はここでこれに似た質問をしました:アンチエイリアシングなしで画像をストレッチする方法と本当に良い反応を得ました. それ以来、かなり変更しましたが、クリックすると（アンチエイリアスなしで）伸びるシンプルなバージョンがあります：http://jsfiddle.net/howlermiller/U2eBZ/1/

しかし、それは信じられないほどハックです。必要がない限り使用しないでください。クリックするたびに画像を再作成する必要があるため、大きな画像では遅くてひどいものになります. ただし、Chrome/Windows では動作します。

編集:これは現在、CSS3 仕様でサポートされています! 現時点ではサポートが非常に不安定ですが、 Chrome はサポートを追加したばかりなので、すぐに使用できるようになることを願っています. 良い時代！

.thing {
  /* IE, only works on <img> tags */
  -ms-interpolation-mode: nearest-neighbor;
  /* Firefox */
  image-rendering: crisp-edges;
  /* Chromium + Safari */
  image-rendering: pixelated;
}

デモ

于 2011-12-26T23:01:35.273 に答える
1

ctx.webkitImageSmoothingEnabled=false は 22 以降で機能するようになりました。

于 2013-06-16T06:03:26.070 に答える
0

とにかくキャンバスを使用しているので、独自のズームを実装し、最近傍のサイズ変更を手動で実装することもできます。

この問題を解決したとしても、いつか別の問題に遭遇するのではないかと思います。

@ティモシーの答えには、実際の数学を支援するために使用できる優れたコードがいくつかあるようです。

于 2011-12-26T23:10:10.637 に答える