doduo

<!DOCTYPE html>
<html>
	<head>
		<title>16 bit SB image ditherer</title>
		<link rel="icon" type="image/png" sizes="16x16" href="./resources/inactive.png">
		<script>
			window.onload=function(){
				//get elements
        var canvas=document.getElementById("canvas")
				var resize=document.getElementById("resize")
				var upload=document.getElementById("upload")
				//upload image and convert
        upload.onchange=function(){
					resize.onchange=null
          var reader=new FileReader()
					reader.onload=function(){
						var image=new Image()
						image.onload=function(){
            	convert(canvas,image,resize.checked)
              resize.onchange=function(){convert(canvas,image,resize.checked)}
             } //end
						image.src=this.result
					} //end
					reader.readAsDataURL(this.files[0])
				} //end
			} //end

      //converter function
      function convert(canvas,image,resize){
        	var c2d=canvas.getContext("2d")
          console.log(resize)
          if (resize===true){
            canvas.width=512
            canvas.height=512
            c2d.drawImage(image,0,0,512,512)
          } else {
       			canvas.width=image.width
						canvas.height=image.height
            c2d.drawImage(image,0,0)
          } //endif
					var data=c2d.getImageData(0,0,canvas.width,canvas.height)
					var err=new Array(3)
					var width=canvas.width*4;
					//Floyd–Steinberg dithering is pretty popular, so it's probably good.
					for(var i=0;i<data.data.length;i+=4){
						for(j=0;j<3;j++){
							err[j]=(data.data[i+j]&0b00000111)/16
							data.data[i+j]&=0b11111000
							data.data[i+      4+j]+=err[j]*7
							data.data[i+width-4+j]+=err[j]*3
							data.data[i+width  +j]+=err[j]*5
							data.data[i+width+4+j]+=err[j]
						} //next
					} //next
					c2d.putImageData(data,0,0)
        } //end
		</script>
	</head>
	<body>
		<input type="file" id="upload">
		<input type="checkbox" id="resize"> Rezize to 512x512
		<hr>
		<canvas id="canvas" ></canvas>
	</body>
</html>