преглед на изображение преди качване с помощта на FileReader, завърта изображението

Видях много публикации за преглед на изображение преди качване. една публикация имаше предполагаем лесен метод за прилагане с помощта на FileReader:

function readURL(input) {
if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
        $('#preview_image').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
}
}  

$("#image_input").change(function(){
    readURL(this);
});

но проблемът е, че изображението се зарежда завъртяно! така че има ли липсващ имот, който пропускам? или може би FileReader не е достатъчно зрял, за да разбере оформлението на изображение. никаква идея!

може би трябва да работя с различен метод!? всякакви идеи относно проблема ще бъдат много оценени.

Благодаря


javascript filereader image-rotation
person ufk    schedule 28.09.2013    source източник
comment
Ще трябва да анализирате exif данните в заглавката на изображението, да прегледате етикета за ориентация и да завъртите съответно.   -  person Ray Nicholus    schedule 29.09.2013
comment
Попаднах на същия проблем. Моята реализация на визуализация е във Vue.js и работи добре. Забелязах, че ако изображението е по-малко, то запазва ориентацията, но ако изображението е по-голямо от 3-4 MB, то се завърта, така че каченото изображение също се завърта. Не знам защо това се случва.   -  person Laraveldeep    schedule 10.11.2017

Отговори (2)


arrow_upward
5
arrow_downward

Знам, че е късно да отговоря на този въпрос, но ето отговор

HTML код

<form method="POST" enctype="multipart/form-data">
    <input type="file" id="file">
    <div id="preview"></div>
    <br>
    <a href="/bg#" id="counter"><- counter</a>
        <select id="degree">
            <option>90</option>
            <option>45</option>
        </select>
    <a href="/bg#" id="clockwise">clockwise -></a>
    <hr>
    <button type="submit">save image</button>
</form>

Javascript код

$('a').click(function(){
    var a = $('img').getRotateAngle();
    var d = Math.abs($('#degree').val());

    if($(this).attr('id') == 'counter'){
       //d = -Math.abs(+a - +d);
        d = a - d;
    }
    else{d = +a + +d;}

    $('img').rotate({animateTo:d});
});

/* image preview */
$('#file').change(function(){
    var oFReader = new FileReader();
    oFReader.readAsDataURL(this.files[0]);
    console.log(this.files[0]);
    oFReader.onload = function (oFREvent) {
        $('#preview').html('<img src="'+oFREvent.target.result+'">');
    };
});

CSS

#preview img {
    max-height: 300px;
    max-width: 300px;
}

http://jsfiddle.net/AxRJh/

Това не е моят код, намерих го на дадена цигулка при търсене на същия проблем.

person Ravi    schedule 30.01.2014

arrow_upward
1
arrow_downward

Това се дължи на мета атрибута Orientation в EXIF ​​информацията на картината, както е предложено в тази публикация.

изображението се завърта автоматично, докато URL адрес за четене от качване на файл (когато е голямо изображение)?

Стойностите за ориентация са предложени тук

Достъп до данни за ротация на JPEG EXIF ​​в JavaScript на клиента страна

person Laraveldeep    schedule 10.11.2017