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

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.
Ответить с цитированием