diedVIPs

html knowhow

Konvertiert Bilder in Daten-URI










Konvertiert Bilder in Daten-URI

So sieht´s aus













Quellcode
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<style type="text/css">
.container {width: 90%;}
.container .results {float: left; width: 50%;}
.container .results .pixelsCont {margin: 0px 20px; height: 300px; border: 1px solid #eee; background: #f5f5f5; overflow: auto; padding: 10px;}
.container .config {float: left; width: 50%;}
.container .config label {display: inline-block; width: 50%;}
.container .config input, .container .config select {width: 50%;}
.container .config .actions {text-align: right;}
.container .config button {padding: 5px 20px;}
.container .config .css {width: 100%; height: 200px;}
.container .config .css textarea {width: 100%; height: 100%; margin: 20px 0px;}
.pixels {display: inline-block; width: 1px; height: 1px;}
</style>
</head>

<body>
<div style="color:blue; margin: 5px 2%; text-align:left" class='container'>
<div style="background-color:silver;" class='config'>
<label>Wähle ein Bild:</label> <input id='upload' type='file'><br/><br/>
<label>Größe der Pixel:</label> <input id='size' type='number' value='1'><br/><br/>
<label>Raum zwischen Pixeln:</label> <input id='space' type='number' value='0'><br/><br/>

<label>Deckkraft gewünscht:</label> <select id='alpha'>
<option value='yes'>Ja</option>
<option value='no'>Nein</option>
</select><br/><br/>
<label>BorderRadius:</label> <input id='roundness' type='number' value='0'><br/><br/>
<div class='actions'><button id='convert'>Konvertiere</button></div>
<div class='css'><textarea></textarea></div> </div>
<div class='results'><div class='pixelsCont'><div class='pixels'></div></div>
</div></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
$(function(){
converter = {
image: "",
pixels: $('.pixels'),
space: 0,
size: 1,
alpha: 'yes',
roundness: 0,
toHex: function(num){
var h = Math.round(num).toString(16);
return h.length==0? '00': h.length==1? '0'+h : h; },
run: function(){
var img = new Image();
img.src = this.image;
var canvas = $('<canvas>')[0];
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
var shadow = [];
for ( var i = 0; i < img.width; i++) {
for ( var j = 0; j < img.height; j++) {
var data = context.getImageData(i, j, 1, 1).data;
var alpha = data[3]/255;
alpha = Math.round(alpha*100)/100;
var x = i+i*this.space;
var y = j+j*this.space;
if(this.alpha=='yes'){
shadow.push( x+'px '+y+'px rgba('+data[0]+','+data[1]+','+data[2]+','+alpha+')' );
}else{
shadow.push( x+'px '+y+'px #'+this.toHex(data[0])+''+this.toHex(data[1])+''+this.toHex(data[2]) );
}}}
shadow = shadow.join(',');
this.pixels
.css('border-radius',this.roundness+'px')
.css('width',this.size)
.css('height',this.size)
.css('box-shadow', shadow);
$('.css textarea').val('.pixels{\n\
border-radius: '+this.roundness+';\n\
display: inline-block;\n\
width: '+this.size+'px;\n\
height: '+this.size+'px;\n\
box-shadow: '+shadow+';\n\
}');
return false;
}
};
setTimeout(function(){converter.run()}, 200);
$('#upload').change(function(evt) {
var files = evt.target.files;
var f = files[0];
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
converter.image = e.target.result;
converter.run();
};
})(f);
reader.readAsDataURL(f);
});
$('#space').change(function(){converter.space = $(this).val();});
$('#size').change(function(){converter.size = $(this).val();});
$('#roundness').change(function(){converter.roundness = $(this).val();});
$('#alpha').change(function(){converter.alpha = $(this).val();});
$('#convert').click(function(){converter.run()});
});
</script>
</body>

</html>








Kontakt    Datenschutz    Impressum