Fetching images with the Fetch Api

This is just a snippet that I want to share today with you because I think is something not a lot of javascript developers know.

It basically shows how to use the fetch api for retrieve an ArrayBuffer and later convert it to a btoa which you can easily display in you browser.

(The example is based on mashape meme generator api)

The new kids of the neighbourhood

• Headers: interface that allow the header manipulation of the fetch api.
• Request: represents a resource request.
• fetch: api for accessing and manipulating parts of the HTTP pipeline.

The forgotten ones

• Uint8Array: typed array of 8-bit unsigned integers.
• btoa(): create a base64 encoded ASCII string from a string of binary data

You can check it all together working in Merememe.com also the source code is available here.

Also don’t forget to use the fetch JavaScript and take a look to all the methods of the fetch Response.