如何使用“多文件上传”控件合并多个上传的图像？

Question

我正在尝试合并多个图像，同时从桌面检索图像。它取自"How to create an image generator for combining multiple images?"。如果上传单张图片，效果很好，但是如果上传多张图片，效果不佳。

这是我的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事件处停止，在该事件中，我尝试循环执行操作。

Answer 1

对于循环迭代，不适用于图像加载功能。

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);
 }
)