if (document.head.innerHTML.indexOf("https://cdn.jsdelivr.net/npm/filesaver.js@1.3.4/FileSaver.min.js") == -1) {
    imported = document.createElement('script');
    imported.src = 'https://cdn.jsdelivr.net/npm/filesaver.js@1.3.4/FileSaver.min.js';
    document.head.appendChild(imported);
}
if (document.head.innerHTML.indexOf("https://cdn.jsdelivr.net/npm/jszip@3.2.2/dist/jszip.js") == -1) {
    imported = document.createElement('script');
    imported.src = 'https://cdn.jsdelivr.net/npm/jszip@3.2.2/dist/jszip.js';
    document.head.appendChild(imported);
}

/*function used to create canvases for each image*/
function canvasChecker(cntr) {
  var imported = document.createElement('canvas');
  imported.className = "blobCanvas";
  imported.id = "blobCanvas" + cntr;
  imported.innerHTML = "";
  document.body.appendChild(imported);
}

var imgs = document.getElementsByTagName("img");
var i = 0;

/*Declare JSZip and make a folder within the zip file called "images"*/
var zip = new JSZip();
var imgZip = zip.folder("images");

while (i < imgs.length) {

  /*this if statement is for a particular website to filter the images to what I'm looking for. feel free to remove it*/
  if (imgs[i].src.indexOf("300x300") > -1){

      var fullImg = imgs[i];

      /*Create the next canvas for the image*/
      canvasChecker(i);

     /*Get the current canvas and match the size to the image*/
      var canvas = document.getElementById("blobCanvas" + i);
      canvas.width = imgs[i].width;
      canvas.height = imgs[i].height;
      var context = canvas.getContext("2d");

      /*Draw the image to the canvas*/
      try{
        context.drawImage(fullImg,0,0,fullImg.width,fullImg.height);
      }
      catch(err){}
  }
  i=i+1;
}

i=0;

/*Get all the newly generated canvases with the images*/
var canvases = document.getElementsByClassName("blobCanvas");

while(canvases[0]) {
    try{
        i=i+1;

        /*This is where the problem lies. This line will not add the canvas blob to the file*/
        canvases[0].toBlob(function(blob) {imgZip.file(i + ".png",blob);});

        console.log("built");
    }
    catch(err){console.log("meh...");}

    /*Remove the canvas elements once they're added to the file*/
    canvases[0].parentNode.removeChild(canvases[0]);
}

/*Save the zip file*/
zip.generateAsync({type: "blob"})
            .then(function(blob) {saveAs(blob, "SavedImages.zip");});