SOURCE

const inp = document.querySelector('input')
const img = document.querySelector('img')

inp.onchange = e => {
    const file = e.target.files[0]
    const reader = new FileReader()
    reader.onload = e => {
        img.src = e.target.result
    }
    reader.readAsDataURL(file)
}

function uploadResult(cutWidth, cutHeight, cutX, cutY) {
    const cvs = document.createElement('canvas');
    cvs.width = 200
    cvs.height = 200

    const ctx = cvs.getContext('2d')
    console.log(img)
    ctx.drawImage(img, cutX, cutY, cutWidth, cutHeight, 0, 0, cvs.width, cvs.height)
    console.log(cvs)
    document.body.appendChild(cvs)
}

const btn = document.querySelector('button')
btn.onclick = () => {
    uploadResult({
        cutWidth: 100,
        cutHeight: 100,
        cutX: 200,
        cutY: 200
    })
}

<input type="file">
<img src="preview" alt="">
<button>查看裁剪后结果</button>