Can't Download Canvas Content

So Im trying to build an app using electron, the program is pretty basic, the user should upload a couple of pictures, they press a button, I draw them into a elemen

Solution 1:

the user should upload a couple of pictures, I draw them into a element and they should be able to download it

You can utilize for loop containing an IIFE to process files object from input type="file" element, new Image, onload event of <img> element, URL.createObjectURL(), Array.prototype.sort() to determine greatest width of the two uploaded images; Promise.all(), Array.prototype.forEach() to process img elements; canvas.toBlob() polyfill to create an objectURL of of image; <a> element having download attribute set to objectURL representing single image created from two images; revoke objectURL at click of a element after download of image completes.

// if (!HTMLCanvasElement.prototype.toBlob) {Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
  value: function(callback, type, quality) {

    var binStr = atob(this.toDataURL(type, quality).split(',')[1]),
      len = binStr.length,
      arr = newUint8Array(len);

    for (var i = 0; i < len; i++) {
      arr[i] = binStr.charCodeAt(i);
    }

    callback(newBlob([arr], {
      type: type || 'image/png'
    }));
  }
});
//}var input = document.querySelector("input");
var canvas = document.querySelector("canvas");
var a = document.querySelector("a");
var ctx = canvas.getContext("2d");
var urls = [];

input.onchange = function(e) {
  var images = [];

  for (var i = 0; i < e.target.files.length; i++) {
    (function(j) {
      // var reader = new FileReader();// reader.onload = function(event) {var img = newImage;
        img.onload = function() {
          images.push(Promise.resolve(this));
          if (images.length === e.target.files.length) {
            Promise.all(images)
              .then(function(data) {
                data.sort(function(a, b) {
                  return a.naturalHeight < b.naturalHeight;
                })
                data.forEach(function(el, index) {
                  if (index === 0) {
                    canvas.width = el.naturalWidth;
                    canvas.height = el.naturalHeight 
                                    + data[index + 1].naturalHeight;
                    ctx.drawImage(el, 0, 0);
                  } else {
                    ctx.drawImage(el, 0, canvas.height - el.naturalHeight);
                  }

                });
                canvas.toBlob(function(blob) {
                  var url = URL.createObjectURL(blob);
                  console.log(blob);
                  a.href = url;
                  a.style.display = "block";
                  urls.push(url);
                });
              })
          }
        }
        img.src = URL.createObjectURL(e.target.files[j]);
      // }// reader.readAsDataURL(e.target.files[j]);
    }(i))
  }
}

a.onclick = function() {
  setTimeout(function() {
    urls.forEach(function(obj) {
      URL.revokeObjectURL(obj)
    })
  })
}

<adownload=""href=""style="display:none">download</a><inputtype="file"accept="image/*"multiple /><br><canvas></canvas>