使用智能手机相机拍摄 html5 照片，图像顺时针旋转

Question

我在移动浏览器(FF 和 Chrome)中测试 html5 特性。我想使用捕获图像 < input type="file" accept="image/*;capture=camera"> .

我为 < input /> 的“更改”事件创建了一个处理程序我用它来获取文件数据(名称和内容)，为此我使用本文中描述的方法 http://www.html5rocks.com/en/tutorials/file/dndfiles/ .之后我在 < img /> 中显示照片内容通过 img.src=内容。问题是，当我用设备相机拍照时，它旋转了 90 度，当我从设备硬盘驱动器中选择 img 时，它没问题(它没有旋转)。

我在 FF 和 Chrome(Android 设备)中都有这个问题。我没有在其他浏览器/设备上测试过这种情况。

如果有任何帮助，我将非常感激。

最好的，克里斯

Answer 1

您需要读取图片上的 EXIF 数据，并根据用户拍照的方向进行适当的旋转。

其他人已经解决了这个问题，您可以通过 https://github.com/gokercebeci/canvasResize 查看示例举个例子。