1Here is a function to get the image as you are uploading using the choose file button
2
3function readURL() {
4    const myimg = document.getElementById("myimg");
5    const input = document.getElementById("myfile");
6    if(input.files && input.files[0]) {
7        const reader = new FileReader();
8        reader.onload = e => {
9            console.log("changed");
10            myimg.src = e.target.result;
11        };
12        reader.readAsDataURL(input.files[0]);
13    }
14}
15document.querySelector('#myfile').addEventListener('change', () => {
16    readURL();
17});
18And the HTML will be
19
20<img src="" id="myimg"><br>
21<input type="file" id="myfile">
22Here is a working fiddle
23
24If you add a file the preview image will be updated. You actually get a data url here. Use the data url to the load the image to the canvas then crop it. calling drawimg(e.target.result)
25
26function drawimg(idata) {
27    const img = new Image();
28    img.onload = () => {
29        ctx.drawImage(img, 33, 71, 104, 124, 21, 20, 87, 104);
30    };
31    img.src = idata;
32}