Saving Images In Node.js: Using Fetch with arrayBuffer() and Buffer
A quick example on the hurdles of binary buffers in JavaScript!
Posted on June 4, 2020
The idea behind this post presented itself to me when I realized nobody had the full A to Z example of saving an image via some binary data.
In my case, I wanted to save an image from an API. Most examples in Node.js I found on the web were turning around and directly creating an <img>
element and setting the src with base64 string or something like that. In my case, I wanted to save the API response directly as an image file. The process is:
- call
arrayBuffer()
on thefetch
response object. - convert the
ArrayBuffer
object to aBuffer
object withBuffer.from()
- save the file via
fs.createWriteStream()
andwrite()
the Buffer object
I also used the nice file-type
package to attempt to determine the file type of the image, since the API doesn't tell you 🤷♂️ [^1].
So, here's the full code example:
import fs from "fs";
import fetch from "node-fetch";
import FileType from "file-type";
const API_URL_HERE = "your-api-url.whatever";
async function savePhotoFromAPI() {
const response = await fetch(API_URL_HERE);
const arrayBuffer = await response.arrayBuffer();
const buffer = Buffer.from(arrayBuffer);
const fileType = await FileType.fromBuffer(buffer);
if (fileType.ext) {
const outputFileName = `yourfilenamehere.${fileType.ext}`
fs.createWriteStream(outputFileName).write(buffer);
} else {
console.log('File type could not be reliably determined! The binary data may be malformed! No file saved!')
}
}
savePhotoFromAPI();
Footnotes
[^1]: Further more, even in 2020, there is no accepted standard for many file types. Wikipedia states: Since there is no standard list of extensions, more than one format can use the same extension, which can confuse both the operating system and users. Yep, a real pain.