Javascript предварительный просмотр изображения всегда в ландшафтном режиме ошибки

Question

Я пытаюсь Динамично предварительного просмотра изображения в JavaScript, прежде чем загрузить его, так что я получил этот код отсюда: Preview an image before it is uploaded

<input type="file" accept="image/*" onchange="loadFile(event)"> 
 
<img id="output"/> 
 
<script> 
 
    var loadFile = function(event) { 
 
    var output = document.getElementById('output'); 
 
    output.src = URL.createObjectURL(event.target.files[0]); 
 
    }; 
 
</script>

Он работает отлично, но когда я загружаю картинку, которая находится в портретном формате, она автоматически поворачивает ее и устанавливает ее в альбомную. Как я могу предотвратить это?

Answer 1

Не поворачивается изображение автоматически. Когда я его протестировал, он показывает мне правильное изображение и ориентацию.

Возможно, у вас возникла проблема с ориентацией EXIF ​​вашего изображения, которое не соблюдается браузером.

Предлагаю вам открыть изображение в программном обеспечении для редактирования изображений, например Photoshop, убедиться, что оно находится в портрете и сохранить его под новым именем.

Повторите попытку своего сценария, и он должен работать.

Если нет, попробуйте использовать другое изображение (портретное изображение, найденное в Интернете).

Answer 2

для Firefox, вы можете использовать image-orientation

img { 
    image-orientation: from-image; 
} 

вы можете также использовать this library:

JavaScript Load Image библиотека для загрузки изображений, предоставленные в качестве файла или Blob объектов или через URL. Он возвращает необязательно масштабированный и/или обрезанный элемент HTML img или canvas.