Preview an image before it is uploaded

by Denise Nepraunig

HTML

<form id="frmUpload">
    <input type='file' id="imgInp" />
    <br>
    <img id="imagePreview" src="http://i.imgur.com/zAyt4lX.jpg" alt="preview" height="16" />
</form>

    <div><canvas id="canvasPreview" width="16" height="16"></canvas> </div>
    <div><canvas id="canvasRepaint" width="16" height="16"></canvas> </div>
    <div id="big"><canvas id="canvasBig" width="400" height="400"></canvas> </div>

CSS

#canvasBig {
    border: 1px solid white;
}

JavaScript

factor = 25;    

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {

                $('#imagePreview').attr('src', e.target.result);                                
                var image = document.getElementById("imagePreview");
                convertImageToCanvas(image);
                repaint();
                bigPaint();
                
            };
            
            reader.readAsDataURL(input.files[0]);
        }
    }

function bigPaint() {
    var c=document.getElementById("canvasPreview");
    var ctx=c.getContext("2d");
        var c2=document.getElementById("canvasBig");
    var ctx2=c2.getContext("2d");
    var imgData=ctx.getImageData(0,0,c.width,c.height);
    var colors = [];
    var colorCount = {};
    
        for(var y = 0; y < 16; y++) {
        for(var x = 0; x < 16; x++) {
          var pix = 4*(x+y*c.width);
          ctx2.fillStyle = "rgba(" + imgData.data[pix] + ","  + imgData.data[pix+1]+ "," + imgData.data[pix+2] + "," + imgData.data[pix+3]+")";
            
            if(!colorCount[ctx2.fillStyle]) {
                colorCount[ctx2.fillStyle] = 0;
            }
            colorCount[ctx2.fillStyle] += 1;
            if(colors.indexOf(ctx2.fillStyle) < 0) {
                colors.push(ctx2.fillStyle);
            }
          ctx2.fillRect(x * factor, y * factor, factor-1, factor-1);
        }
          }
    
    console.log(colors);
    console.log(colorCount);
    
    //ctx2.fillStyle = 'rgba(102,204,0,1)';
   //ctx2.fillRect(0,37.5,150,37.5);
    
}

    // Converts image to canvas; returns new canvas element
    function convertImageToCanvas(image) {
        var canvas = document.getElementById("canvasPreview");
        canvas.width = image.width;
        canvas.height = image.height;
        canvas.getContext("2d").drawImage(image, 0, 0);    
        return canvas;
    }

function repaint() {
...