SOURCE

let canvas = document.createElement('canvas')
document.querySelector('body').appendChild(canvas)
let getData = () => {
    
    let data_url = canvas.toDataURL()
    let data_blob = canvas.toBlob(blob => {
        url = URL.createObjectURL(blob)
    })
}


let file = document.querySelector('input')
let container = document.querySelector('.container')
let ctx = canvas.getContext('2d')
file.onchange = e => {
    console.log(e.target.files)
    let reader = new FileReader()
    // let img = new Image(400)
    Array.from(e.target.files).forEach(x => {
        console.log(x)
        console.log(x.name)
        let blob = x => {
            let img = new Image()
            img.onload = () => {
                let width = img.width, height = img.height
                if (img.width < img.height) {
                    img.style.width = 'auto'
                    img.style.height = '4000px'
                    console.log(img.width)
                } else {
                    img.style.width = '2500px'
                    img.style.height = 'auto'
                }
                canvas.width = img.width
                canvas.height = img.height
                canvas.style.display = 'none'
                ctx.drawImage(img, 0, 0, img.width, img.height)
                canvas.toBlob(blob => {
                    let img_x = new Image()
                    url = URL.createObjectURL(blob)
                    img_x.src = url
                    document.querySelector('body').appendChild(img_x)
                    img.parentNode.removeChild(img)
                })
            }
            let url = URL.createObjectURL(x)
            img.src = url
            // img.style.display = 'none'
            // document.querySelector('body').appendChild(img)
            container.appendChild(img)
            console.log(img)
            console.log(img.height)
        }
        blob(x)
        let dataUrl = () => {
            reader.onload = (b) => {
                img.src = b.target.result
                console.log(b)
                document.querySelector('body').appendChild(img)
            }
            reader.readAsDataURL(x)
        }
    })
}

<div class="container" style="overflow: hidden;width: 0px;height: 0px;"></div>
<input type="file" multiple>
<canvas width="400px" height="200px"></canvas>