相机方向-HTML5

Question

我正在创建一个允许用户拍照的移动Web应用程序（仅HTML5 / JavaScript / CSS）。然后将来自摄像机的图片加载到canvas HTML元素中。用户在拍照时可能会旋转手机，所以最终我想适当地旋转输出。网页中是否只有一种方法可以确定用户在拍照时旋转了多少度？我不是在简单地谈论它们是否处于横向模式。我的意思是，如果您将手机以纵向模式笔直向上放置，则将其面向您的办公桌（现在与办公桌平行），然后将其旋转至横向。这不会触发方向更改，但是如果可以的话，您现在将手机保持在“横向”位置。这将是用户拍摄照片的常用方式。我希望上传时能够适当旋转图像。

谢谢

Answer 1

  

网页中是否只有一种方法可以确定用户拍照时的旋转角度？

是的！拍摄照片时，它们包含元数据-有关图像的信息。这称为EXIF数据。

它告诉您诸如相机的品牌，闪光灯是否熄灭以及对相机有用的信息。

如果您使用JavaScript将图像绘制到画布上，我推荐BlueImp's JavaScript Load Image Library

加载图像后，您将可以拨打电话，例如：

var orientation = data.exif.get('Orientation');

这将告诉您拍摄照片时相机的握持方式。根据手机的不同，您可能还会获得旋转数据，GPS数据，指南针方向等。