Convert icons into flat icons in HTML5

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

online tool to change icons to colored flat icons
jFlat - HML5-jQuery plugin to change flat icons color

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>

2 comments:

Michael Stwart7 January 2024 at 21:23
Great article! Your insights are valuable, and it's evident that our team is well-versed in creating tailored solutions. I appreciate the straightforward explanations. If anyone is seeking reliable Custom web development services, they should definitely consider reaching out to your team https://www.solvierntech.com/web-development-company . Keep up the good work!
bavani7 February 2024 at 02:41
hii
nice content your explanation and solustion is very nice
Here is sharing CISSP Training Information may be helpful to you.
CISSP Training

→	Convert XML or JSON to Java Pojo Classes
→	Change Icon Color Online

SodhanaLibrary