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

Question

JS客户端Exif方向：旋转和镜像JPEG图像数码相机照片通常以JPEG格式保存，带有EXIF“方向”标签。要正确显示，需要根据设置的方向旋转/镜像图像，但浏览器会忽略渲染图像的信息。即使在大型商业网络应用程序中，对EXIF方向的支持也可能不稳定1。相同的源代码还提供 了JPEG可以具有的8种不同方向的精彩摘要：样本图像可在4处获得。问题是如何在客户端旋转/镜像图像，以便正确显示并在必要时进一步处理？有JS库可用于解析EXIF数据，包括orientation属性2。Flickr在解析大图像时注意到了可能的性能问题，需要使用Web工作者3。控制台工具可以正确地重新定向图像5。解决问题的PHP脚本可在6处获得

Answer 1

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

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

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

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

Answer 3

如果

width = img.width;height = img.height;var ctx = canvas.getContext('2d');

然后，您可以使用这些转换将图像转换为方向1

从方向：

1. ctx.transform(1, 0, 0, 1, 0, 0);

2. ctx.transform(-1, 0, 0, 1, width, 0);

3. ctx.transform(-1, 0, 0, -1, width, height);

4. ctx.transform(1, 0, 0, -1, 0, height);

5. ctx.transform(0, 1, 1, 0, 0, 0);

6. ctx.transform(0, 1, -1, 0, height, 0);

7. ctx.transform(0, -1, -1, 0, height, width);

8. ctx.transform(0, -1, 1, 0, 0, width);

在ctx上绘制图像之前