Como obter corretamente o conteúdo de uma imagem utilizando o fetch?

Question

Utilizando a função fetch eu preciso obter o conteúdo de uma imagem obtida na resposta do servidor. O problema é que essa imagem está vindo com o conteúdo diferente do que deveria.

Utilizando "requests" no Python:

b'xffxd8xffxe0x00x10JFIFx00x01x01x00x00x01x00x01x00x00xffxedx00 ...

Utilizando "fetch" no JavaScript:

���� JFIF �� |Photoshop 3.0 8BIM...

Preciso que o conteúdo obtido no fetch seja o mesmo que o obtido no requests do Python, para que a imagem seja salva depois no computador. Abaixo está o meu código:

async function get_image_data_from(url) {
    let response = await fetch(url);
    return await response.text();
}

João Machado · Answer

async function get_image_data_from( url ) {

let blob = await ( await fetch( url ) ).blob() 
// await ( await fetch( url ) ).text() a codificação será sempre utf-8.

let Response_BinaryStrings = await new Promise( (resolve) => {
    let reader = new FileReader();
    reader.onloadend = () => resolve( reader.result );
    
    // texto para dados binários ==>
    reader.readAsBinaryString( blob ); // ==> codificação tipo Windows-1252.
    // ou ==> reader.readAsText( blob, 'x-user-defined' );
    } 
);

return Response_BinaryStrings;
}

Como obter corretamente o conteúdo de uma imagem utilizando o fetch?

One Answer

Add your own answers!

Ask a Question