猿问

iphone上传拍照图片时图片会旋转90度，从相册选择就不会，安卓手机也不会，怎么解决？

在网上找了很多代码，但是不知道他们都应该放在哪个文件里，
还有就是，我的图片用户拍照或者从相册选择后是通过文件的方式传到后台，

一只名叫tom的猫
浏览 1358回答 5
5回答

函数式编程

在服务器后端上传图片接口中检查图片的jpeg exif信息，然后使用图片处理库将图片旋转正再保存
0

千巷猫影

之前也遇到过这个问题，到stackoverflow上搜到了这个答案(IE10+)：function getOrientation(file, callback) {&nbsp; var reader = new FileReader();&nbsp; reader.onload = function(e) {&nbsp; &nbsp; var view = new DataView(e.target.result);&nbsp; &nbsp; if (view.getUint16(0, false) != 0xFFD8) return callback(-2);&nbsp; &nbsp; var length = view.byteLength, offset = 2;&nbsp; &nbsp; while (offset < length) {&nbsp; &nbsp; &nbsp; var marker = view.getUint16(offset, false);&nbsp; &nbsp; &nbsp; offset += 2;&nbsp; &nbsp; &nbsp; if (marker == 0xFFE1) {&nbsp; &nbsp; &nbsp; &nbsp; if (view.getUint32(offset += 2, false) != 0x45786966) return callback(-1);&nbsp; &nbsp; &nbsp; &nbsp; var little = view.getUint16(offset += 6, false) == 0x4949;&nbsp; &nbsp; &nbsp; &nbsp; offset += view.getUint32(offset + 4, little);&nbsp; &nbsp; &nbsp; &nbsp; var tags = view.getUint16(offset, little);&nbsp; &nbsp; &nbsp; &nbsp; offset += 2;&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < tags; i++)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (view.getUint16(offset + (i * 12), little) == 0x0112)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return callback(view.getUint16(offset + (i * 12) + 8, little));&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; else if ((marker & 0xFF00) != 0xFF00) break;&nbsp; &nbsp; &nbsp; else offset += view.getUint16(offset, false);&nbsp; &nbsp; }&nbsp; &nbsp; return callback(-1);&nbsp; };&nbsp; reader.readAsArrayBuffer(file.slice(0, 64 * 1024));}// usage:var input = document.getElementById('input');input.onchange = function(e) {&nbsp; getOrientation(input.files[0], function(orientation) {&nbsp; &nbsp; alert('orientation: ' + orientation);&nbsp; });}<input id='input' type='file' />原文点这(第一个答案)
0

慕妹3146593

利用exif.js修改exif信息，看看这个吧，亲测有用的
0

呼如林

图片 展示元素用 img 就可以 自动修复 不要用第三方的插件<!DOCTYPE html>&nbsp;&nbsp;<html>&nbsp;&nbsp;<head>&nbsp;&nbsp;&nbsp; &nbsp; <meta charset="utf-8">&nbsp;&nbsp;&nbsp; &nbsp; <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />&nbsp;&nbsp;&nbsp; &nbsp; <title>图片上传</title></head>&nbsp;&nbsp;<body>&nbsp;&nbsp;&nbsp; &nbsp; <div style="height: 50px; line-height: 50px;text-align: center;border-bottom: 1px solid #171E28;">&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 上传图片:&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="file" accept="image/*" id="input" capture="camera" onchange="selectFileImage(this);" />&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <div style="margin-top: 10px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img alt="preview" width="480px" src="" id="myImage"/>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; var input = document.getElementById('input');&nbsp; &nbsp; &nbsp; &nbsp; var preview = document.getElementById('myImage');&nbsp; &nbsp; &nbsp; &nbsp; input.onchange = function(e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var file = this.files[0];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var reader = new FileReader();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader.onload = function(e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var data = e.target.result;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; preview.src = data;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader.readAsDataURL(file);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </script></body>&nbsp;&nbsp;</html>&nbsp;
0
随时随地看视频慕课网APP

相关分类

Java
我要回答