クライアント側で EXIF 方向の JPEG 画像を正しく表示するにはどうすればよいですか?-jsチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-10-28 04:46:02

オリジナル

754 人が閲覧しました

How to Correctly Display JPEG Images with EXIF Orientation on the Client Side?

クライアント側での 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 を利用することで、