我不知道该怎么解释,但我会尽力的。我需要建立一个网络应用程序,用户可以在那里拍摄他的照片并上传到服务器。当我尝试在纵向或横向模式下自拍并预览时,图像似乎旋转了90度。
如何在预览图像时解决此问题
<input type="file">
<div class="preview-nodeCenter nodeCenter fadeChange">
</div>
Onload我正在将图像设置为分区的背景。
$('input').change(function() {
var fr = new FileReader;
fr.onload = function() {
var data = fr.result;
$( ".nodeCenter" ).css( "background-image", 'url(' + data + ')' );
//img.src = fr.result;
};
fr.readAsDataURL(this.files[0]);
});
这是小提琴的链接http://jsfiddle.net/vh9ecjej/1/
尝试从手机上自拍或上传在手机上拍摄的照片(我使用iphone进行测试)
在相机中,旋转通常使用EXIF数据完成,您可以使用带有以下代码的EXIF-js库:
$('input').change(function() {
var fr = new FileReader;
fr.onload = function() {
var data = fr.result;
var node = $( ".nodeCenter" ).css( "background-image", 'url(' + data + ')' );
var image = new Image();
image.onload = function() {
EXIF.getData(image, function() {
var orientation = EXIF.getTag(this, "Orientation");
switch(orientation) {
case 3:
node.css('transform', 'rotate(180deg)');
break;
case 6:
node.css('transform', 'rotate(90deg)');
break;
case 8:
node.css('transform', 'rotate(-90deg)');
break;
}
});
};
image.src = data;
//img.src = fr.result;
};
fr.readAsDataURL(this.files[0]);
});
JSFIDDLE
代码不考虑翻转,因为我认为使用相机时不会发生翻转,所有Orientation标签值都可以在这里找到。