相机方向 - HTML5

Question

我正在创建一个允许用户拍照的移动网络应用程序（仅限 HTML5/JavaScript/CSS）。然后将来自相机的图片加载到 canvas HTML 元素中。用户在拍照时可能会旋转 phone，所以最终我想适当地旋转输出。有没有办法在网页中只确定用户在拍照时旋转了多少度？我不仅仅是在谈论它们是否处于横向模式。我的意思是，如果您在纵向模式下将 phone 竖直放在办公桌前（现在与您的办公桌平行），然后将其旋转为横向。这不会触发方向改变，但如果有意义的话，您现在将 phone 保持在 "landscape" 位置。这将是用户拍照的常见方式。我希望上传图片的时候能适当旋转一下

谢谢

Answer 1

Is there a way in a web page only to determine which degree a user has rotated when taking a picture?

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

它会告诉您一些信息，例如相机的品牌、闪光灯是否闪光，以及 - 对您有用的 - 相机的方向。

如果您使用JavaScript将图像绘制到canvas，我可以推荐BlueImp's JavaScript Load Image Library

加载图片后，您就可以像这样调用：

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

这会告诉您拍照时相机的握持方式。根据 phone，您还可以获得旋转数据、GPS 数据、罗盘航向等