Загрузить библиотеку изображений — сбросить или изменить выбранный файл

korsar01 · 13.05.24

Используя эту библиотеку Load-Image, вы узнаете, как правильно сбросить или изменить выбранное изображение. В моем примере, если я выберу изображение, а затем изменю его, у меня появятся предварительные просмотры обоих изображений, нужно сбросить холст? ... Заранее спасибо ....

Загрузить библиотеку изображений — сбросить или изменить выбранный файл

Код:

<!doctype html>
<html>
<head>
<title>Load Image Test</title>
<meta charset="utf-8">
</head>
<body>
<form> <input type="file" id="file-input"> </form> <script src="js/load-image.all.min.js"></script> <script>
document.getElementById('file-input').onchange = function (e) { loadImage( e.target.files[0], function (img) { document.body.appendChild(img) }, { maxWidth: 200, orientation: true } // Options )
} </script>
</body>
</html>

Код (разметка):

pavloz · Суббота в 08:25

Привет, я никогда раньше не использовал библиотеку Load-Image, поэтому могу предположить, что переменная img, переданная анонимной функции (img), уже является действительным (новым) элементом изображения, и поэтому вы можете использовать ее src для обновления предыдущего изображения. .
Сначала поместите куда-нибудь пустой HTML-элемент изображения:

Код:

document.getElementById('file-input').onchange = function(e){ loadImage( e.target.files[0], function(img){ img.addEventListener('load', function(){ document.getElementById('myImg').src = this.src; }); }, { maxWidth: 200, orientation: true }//Options ) }

HTML: вместо этого используйте следующий скрипт:
<img id="myImg" alt="динамичный">
Код (JavaScript): Надеюсь, это поможет.

Загрузить библиотеку изображений — сбросить или изменить выбранный файл

korsar01

pavloz

Поделиться страницей

О нашем форуме!

Новые пользователи

Что нового?