Estoy creando un lienzo para rotar una imagen y creando una mancha. Pero lo necesito como un archivo para subirlo al servidor.

 return new Promise((resolve, reject) => { canvas.toBlob(blob => { // returning an error if (!blob) { reject(new Error('Canvas is empty')); return; } // blob.name = fileName; // creating a Object URL representing the Blob object given const rotatedImageUrl = window.URL.createObjectURL(blob); resolve(rotatedImageUrl); }, 'image/jpeg'); });

Estoy tratando de crear un archivo desde el blob. Puedo crearlo usando este fragmento.

 const rotatedFile = new File([img], originalFile.name, { type: originalFile.type, });

Pero el problema es que el tamaño del archivo generado es de solo 58 bytes.

 lastModified: 1644577677380 lastModifiedDate: Fri Feb 11 2022 17:07:57 GMT+0600 (Bangladesh Standard Time) {} name: "IMG_4792.JPG" size: 58 type: "image/jpeg" webkitRelativePath: ""

Creo que la imagen está corrupta de alguna manera. Inicialmente, pensé que el lienzo de alguna manera estaba corrompiendo mi imagen, pero también intenté crear un archivo a partir de un archivo cargado convertido en blob. Eso también me dio la misma salida. El tamaño del archivo no es correcto.

 const file = e.target.files[0]; const blobUrl = URL.createObjectURL(file); const generatedFile = new File([blobUrl], 'untitled', { type: file.type, });

¿Hay alguna solución? ¿Cómo puedo crear correctamente el archivo desde el blob?