HTML5 キャンバスの画像を最適な品質でダウンスケールする方法

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

HTML5 では、キャンバス要素を使用して画像のサイズを変更できますが、デフォルトのダウンスケールはこの方法では、多くの場合、品質が低くなります。キャンバスを使用してダウンスケーリングするときに最適な画質を実現する手順は次のとおりです:

1. 画像のスムージングを無効にする: デフォルトでは、ブラウザーはサイズ変更時に画像のスムージングを適用して、エッジのギザギザを軽減します。ただし、画像がぼやける可能性があります。画像のスムージングを無効にするには、次の CSS プロパティを設定します:

<code class="css">canvas, img {
    image-rendering: optimizeQuality;
}</code>

2. アスペクト比を維持: キャンバスのアスペクト比が元の画像のアスペクト比と一致していることを確認してください。歪みを防ぎます。
3. ピクセルパーフェクト ダウンスケーリング アルゴリズムを使用します: ブラウザーで使用されるデフォルトのダウンスケーリング アルゴリズムでは、ノイズが発生することがよくあります。これに対処するには、各ターゲット ピクセルに対する複数のソース ピクセルの寄与を考慮するピクセルパーフェクト ダウンスケーリング アルゴリズムを使用します。 GameAlchemist によるアルゴリズムの例を次に示します。

<code class="javascript">function downScaleImage(img, scale) {
    // Implementation goes here...
}</code>

4. リサンプリング ステップを最小限に抑える: ダウンスケーリング ステップを繰り返すと、追加のノイズと劣化が発生します。非常に小さいサイズにダウンスケールする必要がある場合は、歪みを最小限に抑えるために複数のステップを使用することを検討してください。ただし、スケールの増分は小さくして、歪みを最小限に抑えます。
5. 大きなソース画像を使用します: ダウンスケールされた画像の鮮明さを確保するには、可能な限り大きなソース画像を使用することをお勧めします。
6. サイズ変更後の色の変更: 必要に応じて、サイズ変更後にキャンバス内の色を変更できます。
7. 高品質形式でエンコード: ダウンスケールした画像をファイルとして保存する場合は、画像の詳細を保持するために、高品質設定を備えた PNG や JPEG などの高品質形式を選択します。

使用例:

<code class="javascript">var img = document.createElement('img');
img.onload = function() {
    var canvas = document.createElement('canvas');
    canvas.width = 300;
    canvas.height = 200;
    var context = canvas.getContext('2d');
    context.imageSmoothingEnabled = false;
    context.drawImage(img, 0, 0, 300, 200);
    var scaledImage = downScaleImage(canvas, 0.5); // Downscale by half
    // Save or send the scaledImage using XMLHttpRequest
};
img.src = 'path/to/largeImage.jpg';</code>

これらの手順に従うと、HTML5 キャンバス内の画像を最適な品質で縮小し、小さいサイズにサイズ変更する場合でも詳細を維持できます。

以上がHTML5 キャンバスの画像を最適な品質でダウンスケールする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。