Commit aa97a7ec authored by Jamie Tanna's avatar Jamie Tanna
Browse files

Blogument image-to-data-uri

parent ffb58e49
Pipeline #423690220 passed with stages
in 5 minutes and 7 seconds
title: "Converting an Image to a Base64 `data` URL with Node.JS"
description: "How to convert an image to a `data` URL using Node.JS on the command-line."
- blogumentation
- nodejs
- command-line
license_code: Apache-2.0
license_prose: CC-BY-NC-SA-4.0
date: 2021-12-06T18:41:19+0000
slug: "node-data-url"
image: /img/vendor/nodejs.png
[Data URLs]( are a pretty handy way of encoding small files, or binary data, into HTML.
Sometimes you'll want to use them for adding images inline into an HTML file, so will want a handy way of converting the image to the correctly formatted URL, of the form:
A "good enough" script is to use the following, which fits into a oneliner:
node -e 'console.log(`data:image/png;base64,${fs.readFileSync(process.argv[1], "base64")}`)' /path/to/image
Or as a standalone script:
// node image.js /path/to/image
const fs = require('fs')
const contents = fs.readFileSync(process.argv[2], "base64")
Note that we've hardcoded `image/png` - Firefox (v91 Nightly, at the time of writing) allows either a JPEG or a PNG to be provided as such, which is great, as does Chromium (v96), but this isn't the best solution as it may not always work.
A better solution is that we use the [`image-type` library]( to correctly determine the media type for the provided file:
const fs = require('fs')
const imageType = require('image-type')
const contents = fs.readFileSync(process.argv[2])
const b64 = contents.toString('base64')
const type = imageType(contents)
if (type.mime === null) {
Which can then be run as:
node image.js /path/to/image
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment