Javascript canvas.toBlob-加载大图像时，整个页面在加载图像时冻结

我正在制作一个上传框。 从操作系统文件对话框中选择图片后，将向用户显示预览。 之后，将开始上载并执行一些动画（ProgressBar）

但问题是，如果用户选择上传一张大照片 在执行canvas.toBlob（）时，整个页面都会冻结，因此进度条动画失去了平滑移动，并进行了痛苦的跳跃

function getCanvasBlob(canvas) {
    return new Promise(function(resolve, reject) {
        canvas.toBlob(function(blob) {
            resolve(blob);
        }, 'images/jpeg', 1)
    })
}

首先，我认为这是因为在浏览器中加载了大文件，并编写了一些代码将所选图像的大小调整为100px*100px 但这不是问题所在

我可以为上传设置大小限制，但我不想为这个项目这么做

我搜索了很多，才发现这个问题

它使用canvas.toDataURL（）而不是canvas.toBlob（）的 我也尝试了canvas.toDataURL（），但也出现了同样的问题 没有人回答这个问题

那么有没有办法摆脱它呢

这是上传框的图像：