Convert icons into flat icons in HTML5

Sunday 1 September 2013 | Posted by
It is possible to process images with HTML5 like reading pixel color and writing pixel color. By using the concept of pixel it is possible to convert image into flat image.

first of all we have to know read pixel

Just try this example with demo . The browser may wont allow you to get images from other websites.

DEMO



read pixel color :

Pixel does have 4 components..
         1. Red - r 
         2. Green - g
         3. Blue - b
         4. Alpha - a  ( alpha compositing is the process of combining an image with a background to create the appearance of partial or full transparency )

HTML CODE 

<!-- this is the images for processing -->

<img id="scream" src="html5.gif" alt="The Scream" width="220" height="277"><p>Canvas:</p>

<!-- this is the canvas to display the images -->

<canvas id="cancan" width="500" height="600">Canvas Blue Goat</canvas>

Java Script for reading pixels

   function imageLoaded() {
    var img=document.getElementById("scream");
    var limit=150;
    element = document.getElementById("cancan");
    c = element.getContext("2d");
   
   // read the width and height of the canvas
    width = element.width;
    height = element.height;

    // stamp the image on the left of the canvas:
    c.drawImage(img, 0, 0);

    
    imageData = c.getImageData(0, 0, width, height);
    
    w2 = width/2;

    for (y = 0; y < height; y++) {
        inpos = y * width * 4; // *4 for 4 ints per pixel
        outpos = inpos;
        for (x = 0; x < w2; x++) {
            r = imageData.data[inpos++]; // less red
            g = imageData.data[inpos++]; // less green
            b = imageData.data[inpos++]; // MORE BLUE
            a = imageData.data[inpos++];     // same alpha
            alert(a+','+b+','+c+','+d)
        }
    }

}

imageLoaded();

java script to writing pixel  :


function imageLoaded() {
    var img=document.getElementById("scream");
    var limit=150;
    element = document.getElementById("cancan");
    c = element.getContext("2d");
   
   // read the width and height of the canvas
    width = element.width;
    height = element.height;

    // stamp the image on the left of the canvas:
    c.drawImage(img, 0, 0);

    
   imageData = c.getImageData(0, 0, width, height);

    
    w2 = width/2;

    for (y = 0; y < height; y++) {
        inpos = y * width * 4; // *4 for 4 ints per pixel
        outpos = inpos;
        for (x = 0; x < w2; x++) {
            r = imageData.data[inpos++]; // less red
            g = imageData.data[inpos++]; // less green
            b = imageData.data[inpos++]; // MORE BLUE
            a = imageData.data[inpos++];     // same alpha
            
            //setting the pixel color
            imageData.data[outpos++] = b;
            imageData.data[outpos++] = g;
            imageData.data[outpos++] = r;
            imageData.data[outpos++] = a;
        }
    }

    // put pixel data on canvas
    c.putImageData(imageData, 0, 0);
}

imageLoaded();

Here is the java script to convert image into flat........


function imageLoaded() {
    var img=document.getElementById("scream");
    var limit=150;
    element = document.getElementById("cancan");
    c = element.getContext("2d");
   
   // read the width and height of the canvas
    width = element.width;
    height = element.height;

    // stamp the image on the left of the canvas:
    c.drawImage(img, 0, 0);
    
   imageData = c.getImageData(0, 0, width, height);
    
    w2 = width/2;

    for (y = 0; y < height; y++) {
        inpos = y * width * 4; // *4 for 4 ints per pixel
        outpos = inpos;
        for (x = 0; x < w2; x++) {
            r = imageData.data[inpos++]; // less red
            g = imageData.data[inpos++]; // less green
            b = imageData.data[inpos++]; // MORE BLUE
            a = imageData.data[inpos++];     // same alpha

            var min=Math.min(r,g);
            min=Math.min(min,b);

            if(min<limit)
               min=100;
            else
               min=255;
            imageData.data[outpos++] = min;
            imageData.data[outpos++] = 250;
            imageData.data[outpos++] = 255;
            imageData.data[outpos++] = a;
        }
    }

    // put pixel data on canvas
    c.putImageData(imageData, 0, 0);
}

imageLoaded();

Complete html code : 


<!DOCTYPE html>
<html>
<body>

<!-- this is the images for processing -->

   <img id="scream" src="html5.gif" alt="The Scream"><p>Canvas:</p>

<!-- this is the canvas to display the images -->

<canvas id="cancan" width="500" height="600">Canvas Blue Goat</canvas>

<script>
function imageLoaded() {
    var img=document.getElementById("scream");
    var limit=150;
    element = document.getElementById("cancan");
    c = element.getContext("2d");
   
   // read the width and height of the canvas
    width = element.width;
    height = element.height;

    // stamp the image on the left of the canvas:
    c.drawImage(img, 0, 0);
    
   imageData = c.getImageData(0, 0, width, height);
    
    w2 = width/2;

    for (y = 0; y < height; y++) {
        inpos = y * width * 4; // *4 for 4 ints per pixel
        outpos = inpos;
        for (x = 0; x < w2; x++) {
            r = imageData.data[inpos++]; // less red
            g = imageData.data[inpos++]; // less green
            b = imageData.data[inpos++]; // MORE BLUE
            a = imageData.data[inpos++];     // same alpha

            var min=Math.min(r,g);
            min=Math.min(min,b);

            if(min<limit)
               min=100;
            else
               min=255;
            imageData.data[outpos++] = min;
            imageData.data[outpos++] = 250;
            imageData.data[outpos++] = 255;
            imageData.data[outpos++] = a;
        }
    }

    // put pixel data on canvas
    c.putImageData(imageData, 0, 0);
}

imageLoaded();
</script>

</body>
</html>
Labels:,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Blogroll

Popular Posts