How to generate data URLs in JavaScript?
All data URLs (also known as data URIs) begin with data:
, followed by the media type string (which can be omitted) and the data itself.
Below are some examples of data URLs and ways to generate them.
text/plain
dataconst data = 'Hello World!'
console.log(`data:text/plain;charset=utf-8,${encodeURIComponent(data)}`)
text/plain
data, base64 encodingconst data = 'Hello World!'
console.log(`data:text/plain;charset=utf-8;base64,${btoa(unescape(encodeURIComponent(data)))}`) // Browser
console.log(`data:text/plain;charset=utf-8;base64,${Buffer.from(data).toString('base64')}`) // Node.js
text/html
data, base64 encodingconst data = '<b>Hello World!</b>'
console.log(`data:text/html;charset=utf-8;base64,${btoa(unescape(encodeURIComponent(data)))}`) // Browser
console.log(`data:text/html;charset=utf-8;base64,${Buffer.from(data).toString('base64')}`) // Node.js
image/svg+xml
data, base64 encodingconst data =
`<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100">
<circle cx="50" cy="50" r="20" fill="yellow" />
</svg>`
console.log(`data:image/svg+xml;charset=utf-8;base64,${btoa(unescape(encodeURIComponent(data)))}`) // Browser
console.log(`data:image/svg+xml;charset=utf-8;base64,${Buffer.from(data).toString('base64')}`) // Node.js
Thanks for stopping by my digital playground! If you want to say hi, you can reach out to me on LinkedIn or via email. I'm always keen to chat and connect.
If you really-really like my work, you can support me by buying me a coffee.