Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.05.2019, 10: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 в 12:15. Причина: форматирование кода
Ответить с цитированием
  #2 (permalink)  
Старый 22.05.2019, 12:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,872

Добби_Старк,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 22.05.2019, 12:15
Аватар для Добби_Старк
Новичок на форуме
Отправить личное сообщение для Добби_Старк Посмотреть профиль Найти все сообщения от Добби_Старк
 
Регистрация: 21.05.2019
Сообщений: 7

Форматирование кода
Отформатировал - теперь запускается, спасибо за совет!
Ответить с цитированием
  #4 (permalink)  
Старый 22.05.2019, 12:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,872

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

Загрузка изображений в Canvas
Спасибо Это интересное решение, но суть именно в том, что бы пользователь мог по очереди добавлять картинки, а не все сразу.
Ответить с цитированием
  #6 (permalink)  
Старый 22.05.2019, 12:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,872

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

Загрузка изображений в Canvas
Хорошо, сейчас попробую) Если у меня не получится, сможете показать мне пример кода?
Ответить с цитированием
  #8 (permalink)  
Старый 22.05.2019, 12:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,872

canvas вывод нескольких картинок
Добби_Старк,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 </head>

<body>
<input type="file" id="imageLoader" name="imageLoader"/>
<canvas id="imageCanvas"></canvas>
<script>
var imageLoader = document.getElementById("imageLoader");
imageLoader.addEventListener("change", handleImage, false);
var canvas = document.getElementById("imageCanvas");
var ctx = canvas.getContext("2d");
var dx = 0;
var width = 0;
var arrImg = [];

function handleImage(e) {
    var reader = new FileReader;
    reader.onload = function(event) {
        var img = new Image;
        img.onload = function() {
            width += img.width;
            canvas.width = width;
            canvas.height = Math.max(canvas.height, img.height);
            arrImg.push(img);
            dx = 0;
            arrImg.forEach(function(img) {
                ctx.drawImage(img, dx, 0);
                dx += img.width
            })
        };
        img.src = event.target.result
    };
    reader.readAsDataURL(e.target.files[0])
};
</script>
</body>
</html>

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

Загрузка изображений в Canvas
Спасибо, огромное, Рони!) Вы мне очень помогли
Ответить с цитированием
  #10 (permalink)  
Старый 22.05.2019, 14:05
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,190

А зачем вам такие длинные ссылки? Зачем готовый файл превращать в строку и опять загружать?
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<input type="file" id="imageLoader">
	<canvas id="imageCanvas"></canvas>
	<script>
		var imageLoader = document.getElementById("imageLoader");
		imageLoader.addEventListener("change", handleImage, false);
		var canvas = document.getElementById("imageCanvas");
		var ctx = canvas.getContext("2d");
		var width = 0;
		var arrImg = [];

		function handleImage(e) {
			var file = e.target.files[0];
			var img = new Image();
			img.src = URL.createObjectURL(file);
			URL.revokeObjectURL(file);
			img.onload = function() {
				width += img.width;
				canvas.width = width;
				canvas.height = Math.max(canvas.height, img.height);
				arrImg.push(img);
				arrImg.reduce(function(dx, img) {
					ctx.drawImage(img, dx, 0);
					dx += img.width;
					return dx;
				}, 0);
			};
		};
	</script>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ленивая загрузка изображений через Promise. Цепочка. Duda.Ml1986@gmail.com Events/DOM/Window 11 12.02.2019 10:38
DLE загрузка изображений через дополнительное поле armn555 Общие вопросы Javascript 1 23.08.2017 10:17
DLE загрузка изображений через дополнительное поле armn555 Элементы интерфейса 0 18.08.2017 11:08
Предварительная загрузка изображений для слайдера domius Ваши сайты и скрипты 0 10.06.2014 14:38
Массовая загрузка изображений ybiza AJAX и COMET 3 15.05.2011 22:02