Estoy usando react-easy-crop para permitir que los usuarios modifiquen sus fotos de perfil después de cargarlas. El problema que estoy experimentando es que después de recortar, la imagen se devuelve en forma de una URL de blob como esta: blob:http://localhost:3000/5e44190e-a087-4683-b3a4-dfce4a57ee62 que no es útil ya que solo puede ser visto en mi máquina local.
Intenté convertirlo en una URL de datos (que entiendo que luego se puede compartir y ver en todos los navegadores), usando FileReader y el método readAsDataURL() como este:
let blob = await fetch(imageToCrop).then((r) => r.blob()); let reader = new FileReader(); reader.readAsDataURL(blob); reader.onloadend = function () { let base64data = reader.result; console.log(base64data); }; La variable base64data devuelve lo que creo que necesito, sin embargo, todos mis intentos de almacenar este resultado en mi estado solo devuelven un valor nulo.
¿Alguien sabe cuál es la mejor manera de manejar esto?
Si tiene esta línea en su código, bórrela porque revoca su URL.
window.URL.revokeObjectURL(this.fileUrl);
Si necesita la salida base64 de la imagen recortada, puede obtenerla después de usar el lienzo para recortarla con canvas.toDataURL('image/jpeg') . Esta cadena base64 se puede compartir con cualquier persona o cargar en un servidor remoto.
Esta es básicamente la línea comentada en la función getCroppedImg() de esta demostración: https://codesandbox.io/s/q8q1mnr01w?file=/src/cropImage.js:2362-2562
Por cierto, supongo que también podría cargar el blob en un servidor remoto y almacenar la imagen en algún lugar como AWS S3.