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

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

For 循环迭代不适用于图像加载功能..

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