{"id":8205,"date":"2016-12-23T09:00:16","date_gmt":"2016-12-23T14:00:16","guid":{"rendered":"https:\/\/blogs.mathworks.com\/pick\/?p=8205"},"modified":"2016-12-22T02:08:51","modified_gmt":"2016-12-22T07:08:51","slug":"encode-images-as-base64","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/pick\/2016\/12\/23\/encode-images-as-base64\/","title":{"rendered":"Encode images as Base64"},"content":{"rendered":"
\n

Jiro<\/a>‘s pick this week is Base64 Image Encoder<\/a> by Michael Katz<\/a>.<\/p>\n

Some of you may remember Mike from when he was one of the bloggers for the MATLAB Community Blog<\/a>, formerly known as the MATLAB Desktop blog.<\/p>\n

Starting from R2016a, you can create live MATLAB scripts<\/a>, which are executable MATLAB documents that can have formatting and embedded images.<\/p>\n

openExample('matlab_featured\/Creating2DPlots2Example'<\/span>)\r\n<\/pre>\n
\"\" <\/p>\n
You were always able to publish<\/a> your MATLAB scripts, but with live scripts you’re editing and executing the final document.<\/p>\n
With publishing, I usually prefer to use HTML for sharing, because it doesn’t create pages, which sometimes cause undesireable page breaks in the document. However, one pet peeve I had was that it would create separate image files for the graphics.<\/p>\n
\"\" <\/p>\n
If I want to share this, I need to zip the files and have the other person unzip to view the document. I much prefer a single document.<\/p>\n
Live scripts, publishing, HTML, single document… How do these all tie together? Well, live scripts are saved with a .mlx<\/tt> extension, and you can share them with other MATLAB users, but you can also choose to output them as static documents, such as HTML or PDF.<\/p>\n
\"\" <\/p>\n
When you choose HTML, it creates a single HTML file!<\/p>\n
\"\" <\/p>\n
This is when I first learned that you could embed images directly into your HTML file. You represent your image file (binary format) as ASCII text using Base64<\/a> encoding. Then, in your HTML file, you embed the image like this.<\/p>\n
<img src=\"data:image\/png;base64,...<\/pre>\n
Sweet!!<\/p>\n
I just needed to convert my images to Base64 encoding, and I simply searched the web for “matlab base64 image”. Thanks to Mike’s code, I was able to create a simple function for embedding images into a single HMTL file. Thanks, Mike!<\/p>\n
\"\" <\/p>\n
Comments<\/b><\/p>\n
Give it a try and let us know what you think here<\/a> or leave a comment<\/a> for Mike.<\/p>\n