自拍时图像旋转了90度

Image rotated 90 degrees when taken a selfie

本文关键字：90度 旋转 图像      更新时间：2023-09-26

我不知道该怎么解释，但我会尽力的。我需要建立一个网络应用程序，用户可以在那里拍摄他的照片并上传到服务器。当我尝试在纵向或横向模式下自拍并预览时，图像似乎旋转了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标签值都可以在这里找到。

相关文章：