Как объединить несколько загруженных изображений с помощью управления загрузкой нескольких файлов? - PullRequest
Новая
       5

Как объединить несколько загруженных изображений с помощью управления загрузкой нескольких файлов?

4 голосов
/ 11 октября 2019

Я пытаюсь объединить несколько изображений при получении изображений со стола. Он был взят из «Как создать генератор изображений для объединения нескольких изображений?» . Работает нормально, если загружено одно изображение, но не работает в случае нескольких изображений.

Это мой HTML-код 

<input id="file-input" type="file" name="images[]" multiple maxlength="5" ngf-select="UploadFiles($files)" accept=".png,.jpg,.jpeg,.gif" />
<canvas id="canvas"></canvas>

Это код JavaScript 

    var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');

        var lastImage;
        var lastHeight = 0;
        var lastWidth = 0;
        var imagesLoaded = 0;

        function max(a, b) {
            if (a > b)
                return a;
            return b;
        }

        function addToCanvas(img) {
            canvas.height = max(lastHeight, img.width);
            canvas.width = lastWidth + img.height;

            ctx.clearRect(0, 0, canvas.width, canvas.height);
            if (lastImage) {
                ctx.drawImage(lastImage, 0, canvas.height - lastImage.height);
            }

            ctx.rotate(270 * Math.PI / 180); // rotate the canvas to the specified degrees
            ctx.drawImage(img, -canvas.height, lastWidth);

            lastImage = new Image();
            lastImage.src = canvas.toDataURL();
            lastWidth += img.height;
            lastHeight = canvas.height;
            imagesLoaded += 1;
        }

     $scope.UploadFiles = function (files) {
            $scope.SelectedFiles = files;
            cnt = files.length;

            console.log($scope.SelectedFiles);

            for (i = 0; i < $scope.SelectedFiles.length; i++) {
                console.log(files[i]);
                var reader = new FileReader();

                reader.onload = function (event) {
                    var img = new Image();

                    img.onload = function () {
                        addToCanvas(img);
                    }

                    img.src = reader.result;
                }


                reader.readAsDataURL(files[i]);
            }
        };

Когда я выбираю изображения из папки, отладчик консоли останавливается на событии img.onload, где я пытаюсь выполнить действие в цикле.

1 Ответ

4 голосов
/ 12 октября 2019

Для итерации цикла не работает для функций загрузки изображения .. 

files.map((file) => {
 var reader = new FileReader();
 reader.onload = (event) => {
 var img = new Image();
 img.onload = () => 
{
 addToCanvas(img);
}
img.src = reader.result;
 }
 reader.readAsDataURL(file);
 }
)
...