起初，我認為這應該是很容易的：
const img = document. createElement('img') 。
img.onload = () => { ... }
img.onerror = () => { ... }
img.src = url;
但后來發現我需要在畫布上繪制，然后toBlob()。而且不要忘了在img標簽上添加CORS和crossorigin="anonymous"。這是不是有點太復雜了？有沒有更好的方法呢？
向你展示最終的解決方案（你需要 CORS 頭資訊）：
function getFileFromURL（url）{
return new Promise((resolve, reject) => /span> {
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;
})
}
uj5u.com熱心網友回復：
CBroe建議的解決方案可以說是更好的：
function getFileFromURL（url）{
const fileName = url.split('/').pop（）。
return fetch(url)
.then(response => {
return new File([response.data], fileName)。
});
}
確保你在請求中添加了CORS頭資訊
。轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/326130.html
標籤：