Показать сообщение отдельно
  #1 (permalink)  
Старый 22.05.2019, 11:41
Аватар для Добби_Старк
Новичок на форуме
Отправить личное сообщение для Добби_Старк Посмотреть профиль Найти все сообщения от Добби_Старк
 
Регистрация: 21.05.2019
Сообщений: 7

Загрузка изображений в Canvas
Всем доброго времени суток
Есть задача:
Сделать в интерфейсе один <input type="file"/> и один <canvas>
Из input в canvas должны загружаться изображения и отображаться.
+ Нужно сделать так что бы после ввода в input другого изображения оно появлялось рядом с предыдущим, справа от него.Должно быть сделано на обычном JS, без использования каких либо фреймворков и библиотек
Первую часть задачи я сделал. Изображения загружаются, но заменяют друг друга. Подскажите как можно доработать до нужного мне функционала, пожалуйста. С меня плюс в карму)Вот код:
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" type="text/css" href="./css/style.css">
 <title>Canvas</title>
</head>
<body>
	<input type="file" id="imageLoader" name="imageLoader" class="imageLoader"/>
	<canvas id="imageCanvas" class="canvas"></canvas>
	<script type="text/javascript">
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');


function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img,0,0);
        }
        img.src = event.target.result;
    }
        reader.readAsDataURL(e.target.files[0]);     
}

        </script>
</body>
</html>

Последний раз редактировалось Добби_Старк, 22.05.2019 в 13:15. Причина: форматирование кода
Ответить с цитированием