How to Get a Base64 Version of a File From Command Line
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.
![Write Better JavaScript with Promises]()
You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...
![CSS vs. JS Animation: Which is Faster?]()
How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps?
This article serves as a point-by-point...
![Reverse Element Order with CSS Flexbox]()
CSS is becoming more and more powerful these days, almost to the point where the order of HTML elements output to the page no longer matters from a display standpoint -- CSS lets you do so much that almost any layout, large or small, is possible. Semantics...
![MooTools TextOverlap Plugin]()
Developers everywhere seem to be looking for different ways to make use of JavaScript libraries. Some creations are extremely practical, others aren't. This one may be more on the "aren't" side but used correctly, my TextOverlap plugin could add another interesting design element...