HTML5（三）color pixel and picture

HTML5（三）color pixel and picture

1.color
every pixel (picture element) are consist of 4 bytes.
first byte decide the red value
second byte decide the green value
third byte decide the blue value
fourth byte decide the transparency value

the value range is 0~255

(255,0,0,255) stand for pure red, in memory it is 11111111 00000000 000000000 11111111

2. manage pixel
Object ImageData stores the pixel value, it contains width,height and data properties. data property is a array.
imageData.data[index*4 + 0]
imageData.data[index*4 + 1]
imageData.data[index*4 + 2]
imageData.data[index*4 + 3]

They stands for the index+1 pixel red value, green value and blue value and transparency value.

The picture is width * height pixels. So we have width * height * 4 values in data array.

There are 3 method in context:
createImageData(width,height)     all the pixels are rgba(0,0,0,0)
getImageData(x,y,width,height)
putImageData(data,x,y)

3. simple sample
my file is test3.html, we must put in under apache and test it.

<canvas id="test1" width="280" height="200" style="background-image:url(banner1.gif)">
you are out!
</canvas>

<br />
red value:<input type="range" min="1" max="100" onchange="colorChange(event,0)"/>
<br />
green value:<input type="range" min="1" max="100" onchange="colorChange(event,1)"/>
<br />
blue value:<input type="range" min="1" max="100" onchange="colorChange(event,2)"/>
<br />
transparency:<input type="range" min="1" max="100" onchange="colorChange(event,3)"/>

<script type="text/javascript">

    //get the context

    var canvas = document.getElementById("test1");

    var ctx = canvas.getContext("2d");

    //get width and height of canvas
    var width = parseInt(canvas.getAttribute("width"));
    var height = parseInt(canvas.getAttribute("height"));

    //load the image
    var image = new Image();
    image.onload =imageLoaded;
    image.src = "banner2.gif";
    //save the array of image data
    var imageData=null;
    function imageLoaded() {
        // draw the image on canvas
        ctx.drawImage(image, 0, 0);
        imageData = ctx.getImageData(0, 0, width, height);
    }

    function colorChange(event,offset){
        imageLoaded();
        for (var y = 0; y < imageData.height; y++) {
            for (x = 0;x < imageData.width; x++) {
                //index = pixel number
                var index = y * imageData.width + x;
                var p = index * 4;
                var color = imageData.data[p + offset] * event.target.value / 50;
                // color value range is [0..255]
                color = Math.min(255, color);
                //update the value in array
                imageData.data[p + offset]=color
            }
        }
        ctx.putImageData(imageData, 0, 0);
    }
</script>

4. draw the random color point on canvas
my test file is test3-1.html:
<canvas id="test2" width="300" height="300" style=" background-color: black">
you are out.
</canvas>
<input type="button" value="draw point" onclick="interval=setInterval(randomPixel,1);" />
<input type="button" value="stop" onclick="clearInterval(interval);"/>
<input type="button" value="clear" onclick="clearCanvas();"/>
<script type="text/javascript">
    //get the context
    var canvas = document.getElementById("test2");
    var ctx = canvas.getContext("2d");

    //get width and height
    var width = parseInt(canvas.getAttribute("width"));
    var height = parseInt(canvas.getAttribute("height"));

    var imageData = ctx.createImageData(width, height);

    function randomPixel(){
        var x= parseInt(Math.random()*width);
        var y= parseInt(Math.random()*height);
        var index = y * width + x;
        var p = index * 4;

        imageData.data[p + 0] = parseInt(Math.random() * 256);
        imageData.data[p + 1] = parseInt(Math.random() * 256);
        imageData.data[p + 2] = parseInt(Math.random() * 256);
        imageData.data[p + 3] =parseInt(Math.random() * 256);
        ctx.putImageData(imageData,0,0);
    }

    function clearCanvas(){
        ctx.clearRect(0,0,width,height);
        imageData = ctx.createImageData(width, height);
    }
</script>

references:
http://www.blogjava.net/myqiao/category/46360.html