javascript – 如何处理iOS倒置图片

概述我在网站上使用输入字段,以便用户可以自己拍照. 在iPad,iPhone上,生成的图片是颠倒的.如何轻松检测用户是否使用相机以便通过Javascript旋转图像？ 我之后在Javascript Canvas中使用该图片. 我得到了这个输入字段： <div class="input-field"> <label>Choose image or take a picture :</label> 我在网站上使用输入字段,以便用户可以自己拍照.

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

我之后在JavaScript Canvas中使用该图片.

我得到了这个输入字段：

<div >    <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]);}

解决方法 我设法使用这些库(我没有想到链接,但搜索谷歌,这些特定版本只是工作)：

> JavaScript EXIF Reader 0.1.4
>二进制AJAX 0.1.10

下面是完整的代码：

HTML：

<div >    <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',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}

总结

以上是内存溢出为你收集整理的javascript – 如何处理iOS倒置图片全部内容，希望文章能够帮你解决javascript – 如何处理iOS倒置图片所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。