Al principio pensé que debería ser tan fácil como:
const img = document.createElement('img'); img.onload = () => { ... } img.onerror = () => { ... } img.src = url; Pero luego resultó que necesito dibujarlo en un lienzo, luego toBlob() . Y no olvide agregar CORS y crossorigin="anonymous" a la etiqueta img . ¿No es un poco demasiado complicado? ¿Hay una mejor manera?
Para mostrarle la solución final (necesita encabezados 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; }) }Podría decirse que la solución sugerida por CBroe es mejor:
function getFileFromURL(url) { const fileName = url.split('/').pop(); return fetch(url) .then(response => { return new File([response.data], fileName); }); }Asegúrese de agregar encabezados CORS a las solicitudes.