Загрузка изображений в 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>
|
Добби_Старк,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Форматирование кода
Отформатировал - теперь запускается, спасибо за совет!:)
|
Добби_Старк,
сделайте массив из картинок и выводите циклом все сразу, возможно есть проще решение |
Загрузка изображений в Canvas
Спасибо:thanks: Это интересное решение, но суть именно в том, что бы пользователь мог по очереди добавлять картинки, а не все сразу.
|
Цитата:
|
Загрузка изображений в Canvas
Хорошо, сейчас попробую) Если у меня не получится, сможете показать мне пример кода?
|
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>
|
Загрузка изображений в Canvas
Спасибо, огромное, Рони!) Вы мне очень помогли:dance: :dance: :dance:
|
А зачем вам такие длинные ссылки? Зачем готовый файл превращать в строку и опять загружать?
<!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>
|
| Часовой пояс GMT +3, время: 21:21. |