const input = document.getElementById('imgI')
const dlarea = document.getElementById('dlarea')
input.addEventListener('change', load)
var files
function load(){
    files = this.files;
    for(var i= 0; files.length > i ; i++){
      process(files[i])
    }
}

function process(file){
  if(!file.type.match('image.*')){
    return alert('Solo funciona con imágenes')
  }
  var fr = new FileReader()
  fr.readAsDataURL(file)
  fr.onload = (e)=>{
    if( e.target.readyState == FileReader.DONE) {
      var img = new Image()
      var cv = document.createElement('canvas')
      var ctx = cv.getContext('2d')
      img.src = e.target.result
      img.onload = ()=>{
        cv.width = img.width
        cv.height = img.height
        ctx.drawImage(img, 0, 0)
        var url = cv.toDataURL(file.type)
        var a = document.createElement('a')
        a.href = url
        a.innerHTML = file.name
        a.download = file.name
        dlarea.appendChild(a)
      }
    }
  }
}