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的上下文转换非常有效。如果您需要提取方向，请仅使用此功能&nbsp;- 您不需要任何EXIF读取库。以下是在base64图像中重新设置方向的功能。&nbsp;这是一个小提琴。我还准备了一个方向提取演示的小提琴。function&nbsp;resetOrientation(srcBase64,&nbsp;srcOrientation,&nbsp;callback)&nbsp;{ &nbsp;&nbsp;var&nbsp;img&nbsp;=&nbsp;new&nbsp;Image();&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;img.onload&nbsp;=&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;width&nbsp;=&nbsp;img.width, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height&nbsp;=&nbsp;img.height, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;canvas&nbsp;=&nbsp;document.createElement('canvas'), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx&nbsp;=&nbsp;canvas.getContext("2d"); &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;set&nbsp;proper&nbsp;canvas&nbsp;dimensions&nbsp;before&nbsp;transform&nbsp;&&nbsp;export &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(4&nbsp;<&nbsp;srcOrientation&nbsp;&&&nbsp;srcOrientation&nbsp;<&nbsp;9)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;canvas.width&nbsp;=&nbsp;height; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;canvas.height&nbsp;=&nbsp;width; &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;canvas.width&nbsp;=&nbsp;width; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;canvas.height&nbsp;=&nbsp;height; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;transform&nbsp;context&nbsp;before&nbsp;drawing&nbsp;image &nbsp;&nbsp;&nbsp;&nbsp;switch&nbsp;(srcOrientation)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;2:&nbsp;ctx.transform(-1,&nbsp;0,&nbsp;0,&nbsp;1,&nbsp;width,&nbsp;0);&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;3:&nbsp;ctx.transform(-1,&nbsp;0,&nbsp;0,&nbsp;-1,&nbsp;width,&nbsp;height);&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;4:&nbsp;ctx.transform(1,&nbsp;0,&nbsp;0,&nbsp;-1,&nbsp;0,&nbsp;height);&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;5:&nbsp;ctx.transform(0,&nbsp;1,&nbsp;1,&nbsp;0,&nbsp;0,&nbsp;0);&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;6:&nbsp;ctx.transform(0,&nbsp;1,&nbsp;-1,&nbsp;0,&nbsp;height,&nbsp;0);&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;7:&nbsp;ctx.transform(0,&nbsp;-1,&nbsp;-1,&nbsp;0,&nbsp;height,&nbsp;width);&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;8:&nbsp;ctx.transform(0,&nbsp;-1,&nbsp;1,&nbsp;0,&nbsp;0,&nbsp;width);&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default:&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;draw&nbsp;image &nbsp;&nbsp;&nbsp;&nbsp;ctx.drawImage(img,&nbsp;0,&nbsp;0); &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;export&nbsp;base64 &nbsp;&nbsp;&nbsp;&nbsp;callback(canvas.toDataURL()); &nbsp;&nbsp;}; &nbsp;&nbsp;img.src&nbsp;=&nbsp;srcBase64;};

Answer 3

如果width&nbsp;=&nbsp;img.width;height&nbsp;=&nbsp;img.height;var&nbsp;ctx&nbsp;=&nbsp;canvas.getContext('2d');然后，您可以使用这些转换将图像转换为方向1从方向：ctx.transform(1, 0, 0, 1, 0, 0);ctx.transform(-1, 0, 0, 1, width, 0);ctx.transform(-1, 0, 0, -1, width, height);ctx.transform(1, 0, 0, -1, 0, height);ctx.transform(0, 1, 1, 0, 0, 0);ctx.transform(0, 1, -1, 0, height, 0);ctx.transform(0, -1, -1, 0, height, width);ctx.transform(0, -1, 1, 0, 0, width);在ctx上绘制图像之前