JavaScript：在使用 EXIF 进行移动上传之前调整图像方向答案

【问题标题】：JavaScript: Adjust Image Orientation Before Mobile Upload With EXIFJavaScript：在使用 EXIF 进行移动上传之前调整图像方向
【发布时间】：2018-12-26 03:47:34
【问题描述】：

我正在尝试将图像从移动设备上传到 Firestore，但图像方向本应为纵向时仍为横向。

基本流程：

使用“输入”图像文件上传图像
使用 EXIF 获取方向并相应地调整到画布
将新画布上传到 Firestore

问题：

预览画布时，方向和大小是正确的，但一旦上传到 Firestore，图像仍处于原始（不正确）方向。

问题：

代码有问题吗？

我只是为了显示而没有改变实际的 EXIF 数据吗？如果是这样，我该如何编辑才能以正确的方向上传？

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    var image = new Image();

    reader.onload = function(e) {
      $('#editImage').attr('src', e.target.result);

      EXIF.getData(input.files[0], function() {
        // Fetch image tag
        // Create canvas
        var canvas = document.createElement("canvas");
        var img = document.createElement("IMG");
        img.setAttribute('src', e.target.result);

        // run orientation on img in canvas
        orientation(img, canvas);
      });
      image.onload = function() {
        // access image size here 
      };
    };
    reader.readAsDataURL(input.files[0]);
    console.log(reader);
  }
}

function orientation(img, canvas) {
  // Set variables
  var ctx = canvas.getContext("2d");
  var exifOrientation = '';

  // Set Width and Height
  var width = img.width;
  var height = img.height;

  var MAX_WIDTH = 600;
  if (width > MAX_WIDTH) {
    height *= MAX_WIDTH / width;
    width = MAX_WIDTH;
  }

  console.log(width);
  console.log(height);

  // Check orientation in EXIF metadatas
  EXIF.getData(img, function() {
    var allMetaData = EXIF.getAllTags(this);
    exifOrientation = allMetaData.Orientation;
    console.log('Exif orientation: ' + exifOrientation);
  });

  // set proper canvas dimensions before transform & export
  if (jQuery.inArray(exifOrientation, [5, 6, 7, 8]) > -1) {
    canvas.width = height;
    canvas.height = width;
  } else {
    canvas.width = width;
    canvas.height = height;
  }

  // transform context before drawing image
  switch (exifOrientation) {
    case 2:
      ctx.transform(-1, 0, 0, 1, width, 0);
      break;
    case 3:
      ctx.transform(-1, 0, 0, -1, width, height);
      break;
    case 4:
      ctx.transform(1, 0, 0, -1, 0, height);
      break;
    case 5:
      ctx.transform(0, 1, 1, 0, 0, 0);
      break;
    case 6:
      ctx.transform(0, 1, -1, 0, height, 0);
      break;
    case 7:
      ctx.transform(0, -1, -1, 0, height, width);
      break;
    case 8:
      ctx.transform(0, -1, 1, 0, 0, width);
      break;
    default:
      ctx.transform(1, 0, 0, 1, 0, 0);
  }

  // Draw img into canvas
  ctx.drawImage(img, 0, 0, width, height);
  console.log(canvas.toDataURL());
  var DataURL = canvas.toDataURL();

  UploadFile(DataURL);
}

【问题讨论】：

标签： javascript html mobile google-cloud-firestore exif

【解决方案1】：

我也遇到了同样的问题，我很高兴分享我如何解决这个问题的步骤。

问题：

很少有智能手机，尤其是三星和 iPhone 以横向模式拍摄照片。但是浏览器不够聪明，无法正确呈现此图像。

分辨率：

第 1 步：您可以读取图像 EXIF 信息并根据方向数据以您想要的方式渲染图像。 “exif-orientation-image” npm 包会派上用场。

"exif-orientation-image" 将读取图像文件并返回带有正确方向图像的画布。然后就可以在屏幕上渲染画布了。

步骤2：如果您想将正确定向的图像上传到服务器，那么不要在步骤1中渲染画布，而是将画布转换为数据URL，然后将数据URL转换为文件。并使用此转换后的文件上传到 s3 存储桶或您正在使用的任何服务器。

【讨论】：