MiniShadowArt
A tool converting your images in CSS box-shadow pixel-art in less than 512b!
(Don't use too big images, it will crash your browser)
Source code:
<html ondrop='with(new FileReader)readAsDataURL(event.dataTransfer.files[0]),onload=function(){
I=new Image;I.src=result;w=c.width=I.width;h=c.height=I.height;a="\46lt;div style=\47width:1px;
height:1px;box-shadow:";z=c.getContext("2d");z.drawImage(I,0,0);D=z.getImageData(0,0,w,h).data;
for(i=0;i<h;i++)for(j=0;j<w;j++)t=4*(i*w+j),a+=(t?",":"")+j+"px "+(i+1)+"px 0#"+(1e7+((D[t]<<16
)+(D[t+1]<<8)+D[t+2]).toString(16)).slice(-6);b.innerHTML=a+"\47>"};return!1'ondragover=return!
1 id=b>DROP AN IMAGE<br><canvas id=c>
→
Demo:
(Drop an image from your desktop)
Fullscreen -
Download
© 2014 - @MaximeEuziere