クライアント側で EXIF 方向の JPEG 画像を正しく表示するにはどうすればよいですか?

クライアント側での JPEG 画像補正のための EXIF 方向のデコード

デジタル カメラの写真は、多くの場合、EXIF メタデータを使用して方向を指定します。ただし、ブラウザーは通常この情報を無視するため、Web アプリケーション上で画像が正しく表示されません。この問題は、JPEG 画像の向きが多数あるために発生します。

この問題に対処するために、JavaScript-Load-Image プロジェクトは、EXIF の向きに基づいて JPEG 画像を回転およびミラーリングするソリューションを提供します。これにより、画像の正確な表示とその後の処理が保証されます。

機能

• JavaScript-Load-Image には、EXIF 解析機能と画像操作機能の両方が組み込まれています。
• 8 つの可能な EXIF 方向をすべて処理し、それに応じて画像を回転およびミラーリングします。
• 補正はキャンバス操作を使用して実行され、高いパフォーマンスと互換性が保証されます。

ソリューション例

JavaScript-Load-Image をアプリケーションに組み込むには、それを依存関係として含めるだけです。次のデモは、ライブラリを使用して EXIF 方向に基づいて画像を回転およびミラーする方法を示しています。

<code class="javascript">import loadImage from 'javascript-load-image';

const imageElement = document.getElementById('my-image');

loadImage(imageElement, (image) => {
  // Get the EXIF orientation value
  const orientation = image.exif && image.exif.Orientation;

  // Perform rotation and mirroring transformations based on orientation
  if (orientation) {
    const width = image.naturalWidth;
    const height = image.naturalHeight;
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;

    const context = canvas.getContext('2d');
    switch (orientation) {
      case 1: // Normal
        // No transformation required
        break;
      case 2: // Mirrored horizontally
        context.translate(width, 0);
        context.scale(-1, 1);
        break;
      case 3: // Rotated 180 degrees
        context.translate(width, height);
        context.rotate(Math.PI);
        break;
      case 4: // Mirrored vertically
        context.translate(0, height);
        context.scale(1, -1);
        break;
      case 5: // Rotated 90 degrees CCW, mirrored horizontally
        context.translate(0, width);
        context.rotate(-Math.PI / 2);
        break;
      case 6: // Rotated 90 degrees CCW
        context.translate(height, 0);
        context.rotate(Math.PI / 2);
        break;
      case 7: // Rotated 90 degrees CW, mirrored horizontally
        context.translate(width, 0);
        context.rotate(Math.PI / 2);
        context.scale(-1, 1);
        break;
      case 8: // Rotated 90 degrees CW
        context.translate(height, width);
        context.rotate(-Math.PI / 2);
        break;
    }

    context.drawImage(image, 0, 0);

    imageElement.src = canvas.toDataURL('image/jpeg');
  }
});</code>

利点

JavaScript-Load-Image を利用することで、

• EXIF の方向に関係なく、JPEG 画像を正しく表示します。
• 一貫した方向を確保することで画像処理操作を強化します。
• 次の方法で画像品質とユーザー エクスペリエンスを向上させます。不正な回転を排除します。

以上がクライアント側で EXIF 方向の JPEG 画像を正しく表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。