HTML5 Game - Working with Image Pixel Manipulation

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Image

Description

Working with Image Pixel Manipulation

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <script type = "text/javascript">
  function draw(){//from  w w  w .j  a  va  2 s .  co  m
    let drawing = document.getElementById("drawing");
    let con = drawing.getContext("2d");
    let original = document.getElementById("original");

    CANV_WIDTH = 200;
    CANV_HEIGHT = 200;

    //draw the original on the canvas
    con.drawImage(original, 0, 0);

    //get the image data
    imgData = con.getImageData(0, 0, 200, 200);

    //loop through image data
    for (row = 0; row < CANV_HEIGHT; row++){
      for (col = 0; col < CANV_WIDTH; col++){
        //find current pixel
        index = (col + (row * imgData.width)) * 4;

        //separate into color values
        r = imgData.data[index];
        g = imgData.data[index + 1];
        b = imgData.data[index + 2];
        a = imgData.data[index + 3];

        //manipulate color values
        r -= 20;
        g += 50;
        b -= 30;
        a = a;

        //manage boundary conditions
        if (r > 255){
          r = 255;
        } 
        if (r < 0){
          r = 0;
        }
        if (g > 255){
          g = 255;
        } 
        if (g < 0){
          g = 0;
        }
        if (b > 255){
          r = 255;
        } 
        if (b < 0){
          b = 0;
        }
        if (a > 255){
          a = 255;
        } 
        if (a < 0){
          a = 0;
        }

        //return new values to data
        imgData.data[index] = r;
        imgData.data[index+1] = g;
        imgData.data[index+2] = b;
        imgData.data[index+3] = a;
      }
    }
    con.putImageData(imgData, 0, 0);
  }
  </script>
</head>

<body onload = "draw()">
  <h1>Pixel data</h1>

  <h2>Original</h2>
  <img src = "http://java2s.com/style/demo/jet.png"
       id = "original"
       alt = "jet picture" />

  <h2>Canvas</h2>
  <canvas id = "drawing"
          height = "200"
          width = "200">
    <p>Canvas not supported!</p>
  </canvas>
  

</body>
</html>

Related Topic