revolunet · July 20, 2011 15:10
diff --git a/drop-base64.html b/drop-base64.html
 <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 - [email protected]
            // 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>
	<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 - [email protected]
	// 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>