The following codes save a image file first. Then encoding it into Base64 string, and decoding it back into binary data (image). Both images are the same. So the encoding/decoding works.
var fs = require("fs");
var image_origial = "logo.png";
fs.readFile(image_origial, 'binary', function(err, original_data){
fs.writeFile('image_orig.png', original_data, 'binary', function(err) {});
var base64Image = new Buffer(original_data, 'binary').toString('base64');
console.log("base64 str:");
console.log(base64Image);
console.log(base64Image.length);
var decodedImage = new Buffer(base64Image, 'base64').toString('binary');
console.log("decodedImage:");
console.log(decodedImage);
fs.writeFile('image_decoded.png', decodedImage, 'binary', function(err) {});
});
Display Base64 string in html:
<template name="myform">
<img id="fromBase64" src="data:image/png;base64,{{getPic}}">
</template>
Corresponding JavaScript code:
Template.myform.helpers({
getPic: function() {
return "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";
}
});
Ref:
http://base64online.org/
https://gist.github.com/gabomdq/5415569