画像と写真 · Social Image Resizer
リサンプリング フィルターの説明: 最近接フィルター、バイリニアフィルター、バイキュービックフィルター、およびランチョスフィルター
· 背景
画像のサイズ変更 リサンプリング キャンバス
サイズ変更ごとに、古いピクセルから新しいピクセルを何色にするかを決定する必要があります。最近傍コピー、双線形平均は 4、双三次重みは 16、Lanczos はウィンドウ シンクを使用します。この記事では、それぞれについて、ブラー、リンギング、エイリアシングの間のトレードオフ、およびブラウザーが提供するものについて説明します。
同じ写真、3 つのツール、3 つの結果 — 鮮明さと輝きが異なるサイズ変更された画像の具体的なパズル
2 つのサイズ変更ツールを使用すると、寸法が同じでエッジが明らかに異なるファイルを作成できます。サンプリングが異なる場合でも、ジオメトリは一致する可能性があります。各出力ピクセルには、ソース情報から導出された色が必要であり、その導出により、鮮明さ、滑らかさ、またはエイリアシングに対する耐性が向上します。ファイルのサイズだけではメソッドを特定できません。
Social Image Resizer は意図的に狭い範囲の約束をしています。 drawImage の前に画像のスムージングを有効にし、高いスムージング品質を要求します。 Canvas 2D API は、ブラウザーがどの名前付きカーネルを選択するかをアプリに伝えないため、製品はソース レベルの確実性を持って出力に最近接、バイリニア、バイキュービック、またはランチョスのラベルを付けることができません。
サンプリングの問題 — わかりやすく言えば、なぜフィルタリングせずに画像を縮小するとモアレやギザギザのエッジが生じるのか
縮小するとサンプルが削除されます。高周波のストライプ、ヘア、メッシュが適切なフィルタリングなしでマッピングされると、ギザギザになったり、光ったり、誤ったパターンが形成されたりする可能性があります。拡大すると、既存のサンプル位置の間に新しいサンプル位置が作成されます。両方向において、リサンプラーは隠れた詳細を明らかにするのではなく、有限のソースからの出力を推定します。
有用なテスト画像は、対角線、1 ピクセルの線、繰り返しグリッド、滑らかなグラデーションを組み合わせたものです。いくつかのスケールでエクスポートし、1 対 1 のピクセルと通常の表示サイズを検査します。観察結果は、テストされたブラウザが、内部実装をリバース エンジニアリングするふりをせずに、どのように難しいコンテンツを処理するかを示しています。
最近接と双線形は便利な概念ですが、ToolAcre はそれらを選択肢として公開しません
最近傍は概念的に最も近いソース サンプルを選択し、ハード ピクセル ブロックを保持する傾向があります。共一次補間は概念的に近くのサンプルをブレンドし、一般的に遷移を滑らかにします。これらの説明は、目に見える極端な現象を説明するのに役立ちますが、ToolAcre にはどちらの方法のラベルが付いたスイッチも提供されておらず、そのテストではエンジンのカーネルが特定されません。
名前付きフィルターを 1 つのエッジのみから推論しないでください。ブラウザーの実装では、規模に応じて動作を最適化したり変更したりできます。唯一信頼できる製品ステートメントは、スムージングが有効であり、品質プロパティが高に設定されていることです。より詳細な分類には、このモジュールの外にあるブラウザー固有の証拠が必要です。
このキャンバス実装では双三次動作は保証されていません
双三次法では、エッジのオーバーシュートに対して柔らかさをトレードするバリアントを使用して、より広範な近傍と三次重み付けを使用します。これは、専用の画像アプリケーションを比較するための貴重な背景です。 render.js は 3 次係数を選択したり、2 次ライブラリをインポートしたりしないため、これは Canvas 2D 出力の規約ではありません。
実稼働ワークフローで特定の立方体カーネルが必要な場合は、それに名前を付けてテストするツールを使用します。 Social Image Resizer は、ネイティブ ブラウザーの可用性とローカル操作を優先します。その結果は、1 つのバリアントの制御された科学的実装として表すのではなく、記録されたエンジンとバージョンに基づいてブラウザーでリサンプリングされた出力として判断される必要があります。
Lanczos はツール契約の範囲外であり、デフォルトとして要求されていません
Lanczos は、ウィンドウ化された sinc アイデアを使用して、エイリアシングを制御しながら詳細を保持します。また、一部の設定ではハード エッジにリンギングが表示されることがあります。ワークブックには、これが多くの写真ツールのデフォルトであると記載されていますが、その普及率についてはここでは触れられていません。さらに重要なことは、ToolAcre では Lanczos の名前を要求するものは何もありません。
この省略は、ハローを診断するときに重要です。 1 つが表示されても Lanczos カーネルであることは証明されませんし、1 つが表示されないからといって別のアルゴリズムであることは証明されません。ソースと出力、ドキュメントのスケールとブラウザを比較し、アプリケーションが観察できない原因の割り当てを回避します。視覚的な症状は、隠されたコードを認定することなくテストをガイドできます。
ブラウザーが提供するもの — 名前付きフィルターではなくスムージングトグルと品質ヒント、およびブラウザーとバージョンによって出力が異なる理由
ブラウザ キャンバスは、フィルター カタログではなく imageSmoothingEnabled と imageSmoothingQuality を公開します。 ToolAcre は、スケールされたソースを描画する直前に、最初の値を true に設定し、2 番目の値を high に設定します。エンジンはヒントの解釈が異なったり、バージョン間で進化したりする可能性があるため、同一の JavaScript がブラウザ間で小さな違いを生む可能性があります。
サンプリングが行われていない場合でも、ジオメトリは明示的なままです。 computeFrame は正確なスケールと描画寸法を返します。 drawRect は結果を中央に配置してオフセットします。出力キャンバスのターゲット寸法は整数です。ブラウザ間の違いを確認するときは、これらの既知の事実を隠れたサンプリングの選択から分離してください。
これでカバーされないもの — サイズ変更後のシャープ化、およびコンテンツ対応または機械学習スケーラー
サイズ変更後のシャープ化、コンテンツ認識メソッド、および機械学習による再構築は存在しません。アンシャープマスク制御、エッジ検出器、または生成された詳細モデルはありません。出力品質コントロールは、サイズ変更後のシャープ化段階ではなく、非可逆フォーマットのエンコードに影響します。これらを別個の操作として扱います。
ブラウザネイティブのワークフローは、シンプルで利用しやすいからこそ、依然として有用です。日常的な社会作物については、実際の結果を検査します。科学的な画像処理、タイポグラフィ マスター、またはピクセル アートの保存には、そのコンテンツに適した明示的なフィルター コントロールと検証を備えたツールを選択してください。
要点: フィルターは外観を説明します — Social Image Resizer はブラウザー独自のリサンプリングを使用するため、これらの用語を知っておくと、何を期待し、何を確認する必要があるかがわかります。
リサンプリングは、サイズがすべてではない理由を説明しますが、証拠はツールと一致する必要があります。 Social Image Resizer は、滑らかで高品質なキャンバス描画を要求し、正確なカーネルをブラウザーに任せます。コードが決して選択しないフィルターを市場に出すことなく、有用な作物を生産するにはこれで十分です。
品質が重要な場合は、難しいテスト画像を保存し、ブラウザの詳細を記録し、エクスポートを比較します。用語は、目に見えるものを説明するのに役立ちます。実装は、正直に主張できることを示します。名前付きアルゴリズムは、コードまたは信頼できるブラウザーの証拠がそれを証明する場合にのみ属します。