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

ブラウザーで画像をダウンサイズ (ダウンサンプル) して高品質にします

Reduxrespot:

ブラウザー内 画像を縮小する場合html5 Canvas 要素を使用すると、画質が非常に低いことがわかりました。いくつかの調査の結果、 で補間を無効にすると品質は向上しますが、それでも最良の結果が得られないことがわかりました。

ベスト プラクティス

シングルステップ ダウンサンプリング

大きな画像を小さな画像にダウンサイズする必要がある状況に推奨image シングルステップのダウンサンプリングを使用します。手順は次のとおりです。

1. drawImage() メソッドを使用して、元の画像を縮小サイズのキャンバスに描画します。
2. getImageData()を使用して縮小画像のデータを取得します。
3. putImageData() を使用して、縮小されたデータを新しいキャンバスに描画します。

次のコード例で実現します:

const originalImage = new Image();
originalImage.onload = () => {
  const originalCanvas = document.createElement('canvas');
  originalCanvas.width = desiredWidth;
  originalCanvas.height = desiredHeight;
  const originalCtx = originalCanvas.getContext('2d');
  originalCtx.drawImage(originalImage, 0, 0, desiredWidth, desiredHeight);

  const scaledData = originalCtx.getImageData(0, 0, desiredWidth, desiredHeight);
  const scaledCanvas = document.createElement('canvas');
  scaledCanvas.width = desiredWidth;
  scaledCanvas.height = desiredHeight;
  const scaledCtx = scaledCanvas.getContext('2d');
  scaledCtx.putImageData(scaledData, 0, 0);
};

マルチステップ ダウンサンプリング

シングルステップ ダウンサンプリングでは品質が十分でない場合、マルチステップのダウンサンプリングを使用できます。これは、より小さい比率を使用して単一ステップのダウンサンプリングを繰り返し実行することによって実現されます。

次に、2 ステップ ダウンサンプリングのコード例を示します。

const originalImage = new Image();
originalImage.onload = () => {
  // 第一步：缩小 50%
  const firstCanvas = document.createElement('canvas');
  firstCanvas.width = originalImage.width / 2;
  firstCanvas.height = originalImage.height / 2;
  const firstCtx = firstCanvas.getContext('2d');
  firstCtx.drawImage(originalImage, 0, 0, firstCanvas.width, firstCanvas.height);

  // 第二步：缩小 50%
  const secondCanvas = document.createElement('canvas');
  secondCanvas.width = firstCanvas.width / 2;
  secondCanvas.height = firstCanvas.height / 2;
  const secondCtx = secondCanvas.getContext('2d');
  secondCtx.drawImage(firstCanvas, 0, 0, secondCanvas.width, secondCanvas.height);

  const finalImage = new Image();
  finalImage.src = secondCanvas.toDataURL();
};

ぼやけの問題

複数ステップのダウンサンプリングにより画像がぼやける可能性があります。この問題を解決するには、次の手法を使用できます。

• 画像のシャープ化: 畳み込みフィルターまたはその他のシャープ化手法を使用して、画像のエッジを強調できます。
• 高品質な補間アルゴリズムを使用します: たとえば、バイリニアまたはバイキュービック補間は、最近傍補間よりも優れた品質を提供できます。
• ダウンサンプリングをより小さいステップで実行します: たとえば、2 ステップのダウンサンプリングでは、各ステップでサイズを 50 ずつ縮小するのではなく、3 ステップのダウンサンプリングを実行して、各ステップでサイズを 33% 縮小します。 % 。

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