JS 客户端 Exif 方向：旋转和镜像 JPEG 图像

Question

数码相机照片通常保存为带有 EXIF“方向”标签的 JPEG。为了正确显示，需要根据设置的方向旋转/镜像图像，但浏览器会忽略渲染图像的此信息。即使在大型商业网络应用程序中，对 EXIF 方向的支持也可能参差不齐 1 。同一来源还很好地总结了 JPEG 可以具有的 8 个不同方向：

示例图像可在 4 获得。

问题是如何在客户端旋转/镜像图像以使其正确显示并在必要时可以进一步处理？

有 JS 库可用于解析 EXIF 数据，包括方向属性 2 。 Flickr 注意到在解析大图像时可能出现性能问题，需要使用 webworkers 3 。

控制台工具可以正确地重新定位图像 5 。解决问题的 PHP 脚本可在 6

原文由 flexponsive 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

github 项目 JavaScript-Load-Image 提供了 EXIF 方向问题的完整解决方案，可以为所有 8 个 exif 方向正确旋转/镜像图像。看 javascript exif方向 的在线演示

图像被绘制到 HTML5 画布上。它的正确渲染是通过canvas操作在 js/load-image-orientation.js 中实现的。

希望这可以节省其他人一些时间，并向搜索引擎介绍这个开源 gem :)

原文由 flexponsive 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Mederr 的上下文转换 非常有效。如果您只需要提取方向，请使用 此功能- 您不需要任何 EXIF 读取库。下面是一个用于在 base64 图像中重新设置方向的函数。 这是一个小提琴。我还准备了一个 fiddle with orientation extraction demo 。

 function resetOrientation(srcBase64, srcOrientation, callback) {
  var img = new Image();

  img.onload = function() {
    var width = img.width,
        height = img.height,
        canvas = document.createElement('canvas'),
        ctx = canvas.getContext("2d");

    // set proper canvas dimensions before transform & export
    if (4 < srcOrientation && srcOrientation < 9) {
      canvas.width = height;
      canvas.height = width;
    } else {
      canvas.width = width;
      canvas.height = height;
    }

    // transform context before drawing image
    switch (srcOrientation) {
      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: break;
    }

    // draw image
    ctx.drawImage(img, 0, 0);

    // export base64
    callback(canvas.toDataURL());
  };

  img.src = srcBase64;
};

原文由 WunderBart 发布，翻译遵循 CC BY-SA 4.0 许可协议