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
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>
0 comments:
Post a Comment