How to Get a Base64 Version of a File From Command Line

By  on  

A while back I wrote an article on how to Convert Image to Data URI with JavaScript. It's a neat trick developers can use for any number of reasons. Instead of abusing canvas, however, why not simply get the base64 data from command line?

You can use base64 and pbcopy to convert a file to base64 and copy it to the clipboard:

# base64 gets data, pbcopy copies to clipboard
base64 -i logo.jpeg | pbcopy

Once you have the file data copied in base64 format, the URL format to use the data is:

# data:{mime-type};base64,{data}
data:image/jpeg;base64,/9j/4AAQSkZJRgAB......

While base64 data and data URIs do look cryptic, they're useful to avoid making requests to other files. I use them when creating presentations or when I can't count on a decent internet connection.

Recent Features

  • By
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

  • By
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

Incredible Demos

  • By
    spellcheck Attribute

    Many useful attributes have been provided to web developers recently:  download, placeholder, autofocus, and more.  One helpful older attribute is the spellcheck attribute which allows developers to  control an elements ability to be spell checked or subject to grammar checks.  Simple enough, right?

  • By
    MooTools-Like Element Creation in jQuery

    I really dislike jQuery's element creation syntax. It's basically the same as typing out HTML but within a JavaScript string...ugly! Luckily Basil Goldman has created a jQuery plugin that allows you to create elements using MooTools-like syntax. Standard jQuery Element Creation Looks exactly like writing out...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!