<html>
<head>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script language="javascript">
//
// client side image to base64 conversion for your CSS
// from revolunet team - contact@revolunet.com
// demo at : http://revolunet.com/static/drop.html
//
$(document).ready(function() {
// add zone events
$('#dropzone')
.bind('dragover', function(e) {
$(this).addClass('dragover');
return false;
})
.bind('dragleave', function(e) {
$(this).removeClass('dragover');
e.stopPropagation();
e.preventDefault();
return false;
})
.bind('drop', function(e) {
$(this).removeClass('dragover');
e.stopPropagation();
e.preventDefault();
readImages(e);
return false;
});
$(document.body)
.bind('dragover', function(e) {
return false;
})
.bind('drop', function(e) {
e.stopPropagation();
e.preventDefault();
return false;
});
//
});
function readImage(file, event) {
//console.log(file.fileName, event.target.result);
$('#css').append('background-image:url('+event.target.result+');\n');
}
function readImages(event) {
var files = event.originalEvent.dataTransfer.files;
$.each( files, function(index, file){
var fileReader = new FileReader();
fileReader.onload = (function(file) {
return function( event ) {
return readImage(file, event);
}
})(file);
fileReader.readAsDataURL(file);
});
}
</script>
<style>
.dragover {
border:5px inset #BBB !important;
background:#EEE !important;
}
#dropzone {
border:1px inset #BBB;
width:400px;
height:150px;
vertical-align:middle;
text-align:center;
background:#DDD;
font-size:28px;
}
#css {
background:#EEE;
border:1px solid black;
width:80%;
height:150px;
overflow-x:scroll;
font-family:courier, sans-serif;
font-size:12px;
white-space: normal;
text-shadow: none;
}
</style>
<link href="http://fonts.googleapis.com/css?family=Bangers:regular&v1" rel="stylesheet" type="text/css">
<style>
* {
font-family: 'Bangers', serif;
font-size:35px;
text-shadow: 1px 1px silver, -1px -1px #444;
}
intro {
font-size:20px;
}
H1 {
font-size:45px;
}
footer, footer * {
font-size:20px;
color:#333;
}
</style>
</head>
<body>
<center>
<h1>Online images to base64 converter</h1>
<!--
<intro>Generate CSS string from your images.</intro>
<br/><br/>
-->
<div id="dropzone" >drop your images here</div>
<br/>
<b>Generated CSS:</b><br/>
<textarea id="css" wrap="OFF"></textarea>
<br/><br/>
<footer>brought to you by <a href='http://revolunet.com'>revolunet</a> team - <a href='http://twitter.com/revolunet'>follow us on twitter</a></footer>
</center>
</body>
</html>