相关疑难解决方法(0)

我在移动设备上制作了一个简单的网络应用程序,允许访问者使用html5输入[type = file]元素捕获照片.然后我会在网上显示它以供预览,然后访问者可以选择将照片上传到我的服务器用于其他目的(即:上传到FB)

当我使用iPhone拍照并垂直握持时,我发现照片的方向存在问题.照片的标签方向正确.但是,当我尝试使用drawImage()方法将其绘制到画布中时,它会被旋转90度.

我试图以4个方向拍摄照片,其中只有一个可以在画布上绘制正确的图像,其他图像可以旋转,甚至可以颠倒翻转.

好吧,我很困惑,以正确的方向来解决这个问题...感谢您的帮助......

这是我的代码,主要来自MDN的副本

<div class="container">
            <h1>Camera API</h1>

            <section class="main-content">
                <p>A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too).</p>

                <p>
                    <form method="post" enctype="multipart/form-data" action="index.php">
                        <input type="file" id="take-picture" name="image" accept="image/*">
                        <input type="hidden" name="action" value="submit">
                        <input type="submit" >
                    </form>
                </p>

                <h2>Preview:</h2>
                <div style="width:100%;max-width:320px;">
                    <img src="about:blank" alt="" id="show-picture" …

我们正在使用FileReader从iPhone上拍摄的照片到浏览器中获取图像.然后我们用drawImage()它将图像绘制到canvas.问题是在iPhone显示屏上拍摄的照片在页面上旋转.我们无法在任何Android设备上重现这一点.

我们可以canvas很容易地旋转图像,但我们如何确定所需的旋转？我们尝试了一些用于JavaScript的EXIF读取库(exif.js)但无法成功读取方向.