ArrayBuffer妙用：自动调整照片方向

2023-11-28 22:56:12

如今，随着移动设备的普及，越来越多的用户通过手机拍照上传至网站或社交媒体。然而，由于手机拍照时的方向不同，导致上传的照片经常出现上下左右颠倒的情况，给用户带来不便。为了解决这一问题，本文将介绍一种利用ArrayBuffer技术来实现照片方向自动调整的方法，使照片始终保持正确的方向显示。

ArrayBuffer简介

ArrayBuffer是一种JavaScript内置对象，用于存储二进制数据。它可以存储任何类型的数据，包括字符串、数字、图像数据等。ArrayBuffer的优势在于它可以直接操作内存，因此处理二进制数据时效率非常高。

读取照片EXIF信息

照片的EXIF信息中包含了照片的方向信息。我们可以通过读取照片的EXIF信息来确定照片的原始方向。

function readEXIF(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      const arrayBuffer = reader.result;
      const view = new DataView(arrayBuffer);
      if (view.getUint16(0, false) !== 0xFFD8) {
        reject(new Error('Invalid JPEG file'));
      }
      const offset = view.getUint32(4, false);
      if (offset < 8) {
        reject(new Error('Invalid EXIF data'));
      }
      const exifLength = view.getUint16(offset + 2, false);
      if (exifLength < 8) {
        reject(new Error('Invalid EXIF data'));
      }
      const exifData = view.slice(offset + 8, offset + exifLength + 8);
      const orientation = view.getUint16(offset + 32, false);
      resolve({
        orientation,
        exifData,
      });
    };
    reader.onerror = () => {
      reject(new Error('Error reading file'));
    };
    reader.readAsArrayBuffer(file);
  });
}

调整照片方向

根据读取到的照片方向信息，我们可以使用canvas来调整照片的方向。

function adjustOrientation(image, orientation) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  const width = image.width;
  const height = image.height;
  switch (orientation) {
    case 2:
      context.translate(width, 0);
      context.scale(-1, 1);
      break;
    case 3:
      context.translate(width, height);
      context.rotate(Math.PI);
      break;
    case 4:
      context.translate(0, height);
      context.scale(1, -1);
      break;
    case 5:
      context.rotate(0.5 * Math.PI);
      context.scale(1, -1);
      break;
    case 6:
      context.rotate(0.5 * Math.PI);
      context.translate(0, -height);
      break;
    case 7:
      context.rotate(0.5 * Math.PI);
      context.scale(-1, 1);
      context.translate(-width, 0);
      break;
    case 8:
      context.rotate(-0.5 * Math.PI);
      context.translate(-width, 0);
      break;
  }
  context.drawImage(image, 0, 0);
  return canvas.toDataURL('image/jpeg');
}

示例代码

const input = document.querySelector('input[type="file"]');
const preview = document.querySelector('img');

input.addEventListener('change', () => {
  const file = input.files[0];
  readEXIF(file).then(({ orientation, exifData }) => {
    const adjustedImage = adjustOrientation(file, orientation);
    preview.src = adjustedImage;
  });
});