Skip to content

Instantly share code, notes, and snippets.

@nitaku
Last active August 29, 2015 14:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nitaku/dc69a4c83ffccca34d9f to your computer and use it in GitHub Desktop.
Save nitaku/dc69a4c83ffccca34d9f to your computer and use it in GitHub Desktop.
Base64 data URI image converter

Drop an image file to compute its data URI representation in Base64.

The conversion is computed client-side using the HTML5 File API (tutorial), so the image is never sent through the internet. It should therefore be very fast and secure!

body {
background: #393d48;
}
#drop_zone {
position: absolute;
left: 0px;
top: 0px;
width: 480px;
height: 500px;
background-repeat: no-repeat;
background-position: 50% 50%;
}
textarea {
position: absolute;
left: 480px;
top: 0px;
width: 480px;
height: 500px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Base64 data URI image converter" />
<meta charset="utf-8">
<title>Base64 data URI image converter</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="drop_zone" style="background-image: url(data:image/png;base64,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)"/>
<textarea id="output"></textarea>
<script>
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var file = evt.dataTransfer.files[0]; // File object.
// file must be an image
if (!file.type.match('image.*'))
return;
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
var data = e.target.result;
document.getElementById('drop_zone').setAttribute('style','background-image: url('+data+');');
document.getElementById('output').innerHTML = data;
};
})(file);
// Read in the image file as a data URL.
reader.readAsDataURL(file);
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}
// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment