How to get the content of an image correctly using fetch?

Asked

Viewed 160 times

1

Using the function fetch I need to get the contents of an image obtained from the server response. The problem is that this image is coming with different content than it should.

Using "requests" in Python:

b'\xff\xd8\xff\xe0\x00\x10JFIF\x00\x01\x01\x00\x00\x01\x00\x01\x00\x00\xff\xed\x00 ...

Using "fetch" in Javascript:

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

I need the content obtained in fetch is the same as that obtained in requests Python, so that the image is saved later on the computer. Below is my code:

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

javascript fetch

  • The image is given binary, you have to search as blob response.blob(); . If you search how text will corrupt you. Take a look at this example

  • @Augustovasques I’m looking for a solution that doesn’t need to install another package because I’m already using a package called puppeteer which has a method that executes a Javascript code in the browser and returns a value. In case I need to get the contents of the image as if I was not using Node.js but only pure JS from the browser. Is it possible to do this ? Luiz had also recommended using the method blob of fetch from the browser in the reply (it deleted the answer), but as I said, I need to get the string content to save the image.

  • Basically the package method puppeteer (similar to Selenium) will return a value that will be a JS code running in the browser itself without Node. After this I saved this file using the fs with the return (image content) of the method. If it is not possible to obtain the content without being "bugged" through the fetch pattern, I’ll try this node-fetch even.

  • In your example code JS is already using fetch, the title of the question is about fetch. In the python example that b in front of the string means binary and if you compare the values you have in python with the example I gave in js you will see that the header is the same only it does not have the bars \

  • In case the package I used is just a browser fetch emulator for Node.

  • But when I use the method blob of fetch from the browser I do not receive the object like this from node-fetch.

  • Ai I do not know how it is behavior of synchronous fetch. But try to create an image as blob let objectURL = URL.createObjectURL(myBlob);
 img.src = objectURL;

  • But how can I get this object buffer Blob to save to a file with the package fs ?

  • If it is to record a file use arrayBuffer() instead of blob() and save as binary.

  • @Augustovasques not to get too long there, you can take me a doubt that is no longer on the subject of this question there in chat ?

  • I’m going to lunch, I’m in another time zone. But yes when I come back help you.

  • Ta then, I’ll leave the question there in the chat. Vlw and good lunch :D

Show 7 more comments

1 answer

0

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;
}

Browser other questions tagged javascript fetch

You are not signed in. Login or sign up in order to post.