console.log(JSON.stringify(myObject, null, 4));

// The third argument sets the indentation level, so you can adjust that as desired.

/* Example Output (I take this from Stack Overflow)

{

    "a": "a",

    "b": {

        "c": "c",

        "d": {

            "e": "e",

            "f": {

                "g": "g",

                "h": {

                    "i": "i"

                }

            }

        }

    }

}

*/

<script>

const WIDTH = 800

let myFile = document.getElementById("myFile")

    myFile.addEventListener("change", (event) =>{

let image_file = event.target.files[0]

let reader = new FileReader

    reader.readAsDataURL(image_file)

    reader.onload = (event) => {

let image_url = event.target.result

let image = document.createElement("img")

    image.src = image_url

​

    image.onload = (e) =>{

let canvas = document.createElement("canvas")

let ratio = WIDTH/e.target.width

    canvas.width = WIDTH

    canvas.height = e.target.height * ratio

const context = canvas.getContext("2d")

      context.drawImage(image, 0, 0, canvas.width, canvas.height)

let new_image_url = context.canvas.toDataURL("image/jpeg",90)

let new_image = document.createElement("img")

    new_image.src = new_image_url

    document.getElementById("wrapper").appendChild(new_image)

    }

  }

})

</script>