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

javascript html5-canvas rotation exif

2022-08-30 01:53:08

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

Summary of EXIF Orientations

示例图像在 4.

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

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

控制台工具可以正确重新定向图像 5.解决该问题的 PHP 脚本在 6 中可用

答案 1

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

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

希望这能为其他人节省一些时间，并教搜索引擎关于这个开源宝石:)

答案 2

Mederr的上下文转换完美地工作。如果你需要提取方向，只使用这个函数 - 你不需要任何EXIF阅读库。以下是在base64图像中重新设置方向的函数。这是它的小提琴。我还准备了一个带有定向提取演示的小提琴。

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;
};