Estoy tratando de usar la increíble biblioteca de compresores en mi proyecto de exposición nativa de React.
Actualmente, tengo esto:
import Compressor from 'compressorjs'; export const uploadPicture = async (uri, path) => { const blob = await new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.onload = function () { resolve(xhr.response); }; xhr.onerror = function (e) { console.log(e); reject(new TypeError("Network request failed")); }; xhr.responseType = "blob"; xhr.open("GET", uri, true); xhr.send(null); }); new Compressor(blob, { //<--- Problem quality: 0.6, maxWidth: 512, maxHeight: 512, success(result) { console.log(result) }, error(err) { console.log(err.message) } }) blob.close(); //firebase stuff to upload after... }
Supongo que esto no funciona porque compressorjs
solo permite los tipos de File
y Blob
y en su lugar estoy insertando una Promise
. Pero no tengo ni idea de qué hacer en su lugar.
Si alguien puede indicarme la dirección correcta, ¡sería increíble! Gracias.
Considere usar el método fetch
API response.blob
para obtener el blob de imágenes del URI en lugar de usar Ajax XMLHttpRequest
Como esto -
let blob = await fetch(uri).then(r => r.blob());
También puede ir un paso más allá obteniendo el archivo real del blob, así:
let file = await fetch(url) .then((r) => r.blob()) .then((blobFile) => new File([blobFile], "fileName", { type: "image/png" }));
import Compressor from "compressorjs"; export const uploadPicture = async (uri, path) => { let blob = await fetch(uri).then(r => r.blob()); new Compressor(blob, { ... }); };
import Compressor from "compressorjs"; export const uploadPicture = async (uri, path) => { let file = await fetch(url) .then((r) => r.blob()) .then((blobFile) => new File( [blobFile], "fileName", { type: "image/png" }) ); new Compressor(file, { ... }); };
Tenga en cuenta que no hay garantía de que esta sugerencia resuelva definitivamente su problema, pero DEFINITIVAMENTE vale la pena intentarlo.
Salud.