HTML5 Canvas で高品質な画像のダウンスケーリングを実現するにはどうすればよいですか?

HTML5 キャンバス画像の高品質なサイズ変更 (ダウンスケール)

HTML5 キャンバスを使用してブラウザーで画像のサイズを変更すると、特に次の場合に品質が低下する可能性があります。スケールダウン。この記事では、この問題を調査し、ダウンスケーリング中に最適な品質を達成するための解決策を提供します。

補間と画像スムージングの無効化

質問に含まれている最初の CSS および JS コード補間と画像スムージングを無効にするプロパティ:

image-rendering: optimizeQuality;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;

ただし、これらのプロパティはダウンスケーリングの品質に直接影響しません。補間と平滑化は新しいピクセルの作成に関係しますが、画像サイズを縮小する場合には関係ありません。

ダウンサンプリングと補間

ブラウザでの画像のダウンスケールの問題が関係しています。

ダウンサンプリングでは、ブラウザは通常、宛先画像の各ピクセルに対してソース画像から 1 つのピクセルを選択する単純な方法を使用します。これにより、ディテールやノイズが失われる可能性があります。

ピクセルパーフェクト ダウンサンプリング アルゴリズム

この問題を解決するには、すべてのソースを取得するピクセルパーフェクト ダウンサンプリング アルゴリズムが必要です。ピクセルを考慮してください。提供されているコード スニペットは、そのようなアルゴリズムの例です。

function downScaleCanvas(cv, scale) {
    // Process all pixels in the source image
    for (sy = 0; sy < sh; sy++) {
        for (sx = 0; sx < sw; sx++) {
            // Calculate target pixel position and weights
            ...

            // Add weighted contributions to target buffer
            ...
        }
    }

    // Create result canvas and populate it
    ...

    return resCV;
}

このアルゴリズムは、1 つ、2 つ、または 4 つのデスティネーション ピクセルに対する各ソース ピクセルの寄与を計算し、ダウンスケーリング中にすべての詳細が確実に保持されるようにします。

複数のダウンスケーリング ステップの重要性

複数のステップでダウンスケーリングすると、画像のあいまいさが増加する可能性があります。これは、連続したダウンスケーリング操作による累積的な丸め誤差によってノイズが大きくなるからです。

他のアプローチとの比較

で示されているように、提供されたアルゴリズムは他のダウンサンプリング手法よりも優れています。例の画像。複数のダウンスケーリングステップを行った場合でも、シャープネスの維持とノイズの最小限化の間のバランスを実現します。

以上がHTML5 Canvas で高品質な画像のダウンスケーリングを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。