Не удается загрузить несколько изображений в загрузчик вложенных файлов - PullRequest
Новая
       17

Не удается загрузить несколько изображений в загрузчик вложенных файлов

0 голосов
/ 07 апреля 2019

Когда страница загружена, происходит цикл чтения файлов, загружающий файлы изображений. Считыватель файлов читает только последние изображения. Я пытался использовать конструктор IIFE в File Reader. Но ничего не сработало.

Коды 

function getDataUri(url,cb){
    var image = new Image();
    image.onload = function() {
        var canvas = document.createElement('canvas');
        canvas.width = this.naturalWidth;
        canvas.height = this.naturalHeight;
        canvas.getContext('2d').drawImage(this, 0, 0);
        cb(canvas.toDataURL('image/jpeg'));
    };
    image.setAttribute('crossOrigin', 'anonymous');
    image.src = url;
}


// Dropzone method
$scope.photoMethods = {};

// Let's said photosURIs had 3 elements
photosURIs.forEach(function(imageURI){
    getDataUri(imageURI, function(dataUri){
        var blob = util.dataURItoBlob(dataUri);
        // Dropzone
        blob['status'] = 'queued';
        $scope.photoMethods.emit("addedfile", blob); // emit addedFile function
        $scope.photoMethods.files.push(blob);
    })
})

// Dropzone callback
$scope.dzPhotoCallbacks = {
    'addedfile' : function(origFile){
        // Execute 3 times at this line
        $rootScope.addWatermark(origFile, function(watermarkImage, width, height){
            // Execute here only once.
        });
    }
}

$rootScope.addWatermark = function(origFile, cb){
    // IIFE return callback function only once.
    (function(origFile, cb){
        let reader = new FileReader();
        reader.addEventListener("load", function(ev) {
            let origImg = new Image();
            origImg.src = ev.target.result;

            origImg.addEventListener("load", function(event){
                let width  = event.target.width;
                let height = event.target.height;

                $rootScope.applyImageWatermark(origImg, event.target.width, event.target.height, function(canvas){
                    cb(canvas, width, height); // run once
                });
            })

            origImg.addEventListener("error", function(error){
                console.log('error: ' + JSON.stringify(error))
            })
        });
        reader.readAsDataURL(origFile);
    })(origFile, cb);
}

Коды выше для чтения URI изображений из массива и преобразования в файл BLOB-объектов, затем добавление их в Dropzone, после чего водяной знак для изображения-блоба в File Reader.

Моя проблема была в том, что File Reader читал только один раз для последнего файла без обратного вызова 3 раза.

...