如何将跨源URL的图片加载并转换为File对象？

一开始我以为操作会非常简单，代码如下：

const img = document.createElement('img');
img.onload = () => { ... }
img.onerror = () => { ... }
img.src = url;

但后续我发现需要先将图片绘制到canvas上，再调用toBlob()方法。同时别忘了配置CORS，并且给img标签添加crossorigin="anonymous"属性。这个实现流程是不是过于繁琐？有没有更优的方案？

下面是最终实现方案（需服务端返回正确的CORS响应头）：

function getFileFromURL(url) {
    return new Promise((resolve, reject) => {
        const fileName = url.split('/').pop();
        const img = document.createElement('img');
        img.setAttribute('crossorigin', 'anonymous');
        img.onload = () => {
            const canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0);
            canvas.toBlob(blob => {
                resolve(new File([blob], fileName));
            });
        };
        img.onerror = () => {
            reject('something went wrong');
        };
        img.src = url;
    })
}

内容的提问来源于stack exchange，提问作者x-yuri