Preview de imagenes verticales aparecen horizontales

Samka · #1 (**permalink**) 03/05/2014, 03:47

tengo este script jquery

Código Javascript:

Ver original<script type="text/javascript" language="javascript">
    $(window).load(function(){
        
        $(function() {
            
            $('#file-input').change(function(e) {
                addImage(e); 
            });
 
            function addImage(e){
                var file = e.target.files[0],
                imageType = /image.*/;
        
                if (!file.type.match(imageType))
                return;
      
                var reader = new FileReader();
                reader.onload = fileOnload;
                reader.readAsDataURL(file);
            }
      
            function fileOnload(e) {
                var result=e.target.result;
                $('#imgSalida').attr("src",result);
            }
        });
    });
    </script>

ésto me permite mostrar una preview de una foto para saber que foto subir más fácilmente, vamos lo que hace Facebook cuando seleccionas una foto. Las fotos horizontales aparecen genial, pero las fotos verticales las gira y las vuelve horizontales, tanto en la preview como cuando las sube...

como lo puedo solucionar?

Samka · #2 (**permalink**) 05/05/2014, 05:21

alguien sabe?

Samka · #3 (**permalink**) 19/05/2014, 07:51

Sigo probando con más códigos y en todos me pasa igual... os dejo uno de los últimos que he probado

Código Javascript:

Ver original<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Image preview</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var blank="http://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif";
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
 
        reader.onload = function (e) {
            $('#img_prev')
            .attr('src', e.target.result)
            .height(200);
        };
 
        reader.readAsDataURL(input.files[0]);
    }
    else {
      var img = input.value;
        $('#img_prev').attr('src',img).height(200);
    }
    $("#x").show().css("margin-right","10px");
}
$(document).ready(function() {
  $("#x").click(function() {
    $("#img_prev").attr("src",blank);
    $("#x").hide();  
  });
});
</script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#x { display:none; position:relative; z-index:200; float:right}
#previewPane { display: inline-block; }
</style>
</head>
<body>
<section>
<input type='file' onchange="readURL(this);" /><br/>
<span id="previewPane">
<img id="img_prev" src="#" alt="your image" />
<span id="x">[X]</span>
</span>
</section>
</body>
</html>