Context.drawImage for multiple images ultimately causes FireFox to crash

Question

I am creating an image downloader that must accept at least 1000 images. As soon as the user selects / drags the images, the images should be displayed for preview purposes. Then the user clicks the Download button to start the download.

I implemented all the functionality, and it works on Chrome as a charm. But this fails in Firefox.

I created the queue mechanism in such a way that at a certain point in time only n number of images will be loaded in the browser as soon as the user selects the images.

More than 20 images also crash (even if you create a batch of 1 image using the queue mechanism). I tested memory usage with the Tab Memory Usage Plugin ( http://mybrowseraddon.com/tab-memory.html ) in Firefox. It even crashes when using 40 MB of memory. Therefore, I think this is not due to a memory leak.

function readAndDisplay(file, index){
    id = getFileId(file);
    reader = new FileReader();

    reader.onload = function (e) {
        addImageCard(file, index);
        resizeImage(e, index);
        delete this;
        //$('#image' + id).attr('src', e.target.result);

    }

    reader.readAsDataURL(file);
}

function resizeImage(fileReaderEvent, index){

    var img = new Image();
    img.onload=function(){
        var MAX_WIDTH = 800;
        var MAX_HEIGHT = 600;
        var width = img.width;
        var height = img.height;

        if (width > height) {
          if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width;
            width = MAX_WIDTH;
          }
        } else {
          if (height > MAX_HEIGHT) {
            width *= MAX_HEIGHT / height;
            height = MAX_HEIGHT;
          }
        }
        var canvas = document.getElementById("image" + index);
        var ctx = canvas.getContext("2d");
        canvas.width = width;
        canvas.height = height;
        ctx.drawImage(img, 0, 0, width, height);

        img.src = "";
        delete canvas;
        delete ctx;
        img = null;
        delete fileReaderEvent;

        uploadQueue.push(index);
        if(loadImageIterator < updatedFiles.length){
            loadImage(updatedFiles[loadImageIterator++]);
        }
        else{
            updatedFiles = [];
        }

    }
    img.src = fileReaderEvent.target.result;
    var md5 = CryptoJS.MD5(fileReaderEvent.target.result).toString();
    console.log(md5);
}

function addImageCard(file, index){

    imageHolder = $("#imageholder");

    imageCard = $("<div>", {
        class: "col m1 s4",
        id: "card" + index
    });

    innerDiv = $("<div>", {
        class: "card"
    });

    cardImage = $("<div>", {
        class: "card-image",
    }).append($("<canvas>", {
        id: "image" + index,
        css: {
            width: "100%"
        }
        //src: "images/sample-1.jpg"
    })).append($("<span>", {
        class: "card-title",
        text: ""
    }));

    cardContent = $("<div>",{
        class: "card-content",
        html: "<p>" + file.name + "</p>"
    });

    cardAction = $("<div>", {
        class: "card-action"
    });

    removeButton = $("<a>", {
        title: "Remove",
        css: {
            "font-size": "20px"
        },
        click: function(){
            remove(index)
        }

    }).append($("<span>", {
        class: "glyphicon glyphicon-remove-circle"
    }));

    uploadButton = $("<a>", {
        title: "Upload Now",
        css: {
            "font-size": "20px",
            float: "right",
            "margin-right": "4px"
        }

    }).append($("<span>", {
        class: "glyphicon glyphicon-cloud-upload"
    }));

    cardAction.append(removeButton);
    cardAction.append(uploadButton);

    innerDiv.append(cardImage);
    innerDiv.append(cardContent);
    innerDiv.append(cardAction);
    imageCard.append(innerDiv);
    imageHolder.append(imageCard);

}

When I comment on the following code, Firefox will not work ctx.drawImage (img, 0, 0, width, height)

So, I guessed that the problem is with this drawImage. The implementation of drawImage is probably different in Chrome and Firefox, and the way I use it makes it work in Chrome, but it throws an error with Firefox.

Are there any specific ideas as to why this problem occurs?

JSFiddle- http://jsfiddle.net/sanchit235/7xh1gbj6/

Firefox - https://crash-stats.mozilla.com/report/index/6107c530-12a1-4aea-96c9-0366c2151010

Answer 1

:

• -, loadImage() for FileSelectHandler() (onchange), loadImage() , ( comp 15 20 ).
  .

• - :
  if(loadImageIterator < updatedFiles.length){ loadImage(updatedFiles[loadImageIterator++]); }
if(++loadImageIterator < updatedFiles.length){ loadImage(updatedFiles[loadImageIterator]); }
updatedFiles[0].

• - . var reader, newFile , .

, Chrome FF, - .