高品質での 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 つの宛先ピクセルに対する各ソース ピクセルの寄与を計算し、ダウンスケーリング中にすべての詳細が確実に保持されるようにします。

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

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

他のアプローチとの比較

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