在网上找了很多代码,但是不知道他们都应该放在哪个文件里,
还有就是,我的图片用户拍照或者从相册选择后是通过文件的方式传到后台,
在网上找了很多代码,但是不知道他们都应该放在哪个文件里,
还有就是,我的图片用户拍照或者从相册选择后是通过文件的方式传到后台,
其实是拿手机拍照的方向问题,iphone正确的手机拍照方式是横屏的,用户往往是竖屏拍照等于照相机反转了90度,出来的照片当然是反转90度,当你横屏拍照上传,图片就是正确的,一张生成的图片是无法辨别选择方向的,只有在上传前反转角度才行, 因为上传到服务器以后,程序怎么可能知道这张照片要反转90度,那张要反转180度,另一张要反转270度呢,其他的不用反转呢,正确的拍照姿势很重要呀,哈哈。。。蛋疼的问题
之前也遇到过这个问题,到stackoverflow
上搜到了这个答案(IE10+):
function getOrientation(file, callback) {
var reader = new FileReader();
reader.onload = function(e) {
var view = new DataView(e.target.result);
if (view.getUint16(0, false) != 0xFFD8) return callback(-2);
var length = view.byteLength, offset = 2;
while (offset < length) {
var marker = view.getUint16(offset, false);
offset += 2;
if (marker == 0xFFE1) {
if (view.getUint32(offset += 2, false) != 0x45786966) return callback(-1);
var little = view.getUint16(offset += 6, false) == 0x4949;
offset += view.getUint32(offset + 4, little);
var tags = view.getUint16(offset, little);
offset += 2;
for (var i = 0; i < tags; i++)
if (view.getUint16(offset + (i * 12), little) == 0x0112)
return callback(view.getUint16(offset + (i * 12) + 8, little));
}
else if ((marker & 0xFF00) != 0xFF00) break;
else offset += view.getUint16(offset, false);
}
return callback(-1);
};
reader.readAsArrayBuffer(file.slice(0, 64 * 1024));
}
// usage:
var input = document.getElementById('input');
input.onchange = function(e) {
getOrientation(input.files[0], function(orientation) {
alert('orientation: ' + orientation);
});
}
<input id='input' type='file' />
图片 展示元素用 img 就可以 自动修复 不要用第三方的插件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>图片上传</title>
</head>
<body>
<div style="height: 50px; line-height: 50px;text-align: center;border-bottom: 1px solid #171E28;">
上传图片:
<input type="file" accept="image/*" id="input" capture="camera" onchange="selectFileImage(this);" />
</div>
<div style="margin-top: 10px;">
<img alt="preview" width="480px" src="" id="myImage"/>
</div>
<script>
var input = document.getElementById('input');
var preview = document.getElementById('myImage');
input.onchange = function(e) {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
preview.src = data;
};
reader.readAsDataURL(file);
}
</script>
</body>
</html>
8 回答4.3k 阅读✓ 已解决
3 回答2.5k 阅读✓ 已解决
3 回答4k 阅读✓ 已解决
6 回答2.7k 阅读✓ 已解决
5 回答2.4k 阅读✓ 已解决
5 回答6.1k 阅读✓ 已解决
4 回答2.1k 阅读✓ 已解决
在服务器后端上传图片接口中检查图片的jpeg exif信息,然后使用图片处理库将图片旋转正再保存