如何处理iOS上下颠倒的画面 [英] How to deal with iOS taking upside down picture

问题描述

我在网站上使用输入字段，以便用户可以自己拍照。

I use an input field on a website so that a user can take himself into photo.

在iPad，iPhone上，生成的图片是颠倒的。如何轻松检测用户是否使用相机以便通过Javascript旋转图像？

On iPad, iPhone, the resulting picture is upside down. How can I easily detect if the user used the camera so that I rotate the image via Javascript ?

我在Javascript Canvas中使用该图片。

I use the picture in a Javascript Canvas after.

我得到了这个输入字段：

I got this input field :

<div class="input-field">
    <label>Choose image or take a picture :</label>
    >input type="file" id="imageLoader" name="imageLoader" accept="image/*"/>
</div>

在JS中：

var imageLoader;
imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', _handleImage, false);

function _handleImage( e ){

    var reader = new FileReader();

    reader.onload = function(event){

        picture.onload = function(){
           // The image here is upside down :( I want to turn it to 180 degrees here
           do_stuff( );

        };

        picture.src = event.target.result;

    };
    reader.readAsDataURL(e.target.files[0]);
}

推荐答案

我设法使用这些库（我没有脑海中的链接，但搜索谷歌，那些特定版本才有效）：

I managed to do it using those libs ( I don't have the links in my mind but search google, those specific versions just works ):

1. Javascript EXIF Reader 0.1.4


2. 二进制Ajax 0.1.10

下面是完整代码：

HTML：

<div class="input-field">
    <label>Choose image or take a picture :</label>
     <input type="file" id="imageLoader" name="imageLoader" accept="image/*"/>
</div>

JS：

var imageLoader, _isUpsideDown = false;
imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', _handleImage, false);

function _handleImage( e ){

    var reader = new FileReader();

    reader.onload = function(event){

        picture.onload = function(){
            // Launch Canvas, display image, etc...
            doStuff();

        };

        picture.src = event.target.result;

    };
    reader.readAsDataURL(e.target.files[0]);

    // Second file reader which will read the file as binaryString to detect the orientation.
    var file = this.files[0];  // file
    filereaderString   = new FileReader; // to read file contents

    filereaderString.onloadend = function() {

        // get EXIF data
        var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));

        // the 3 value means that the image is upside down. 1 is when the image is correct size.
        if( exif.Orientation === 3 ){
            _isUpsideDown = true;
        }

    };

    filereaderString.readAsBinaryString(file); // read the file
}

这篇关于如何处理iOS上下颠倒的画面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！