html5canvas/filterImage.htm at master · najamsk/html5canvas · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<!-- saved from url=(0062)http://labs.skookum.com/demos/barcampclt_physics/newton/0.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Simple Game Physics</title>

  <link rel="stylesheet" href="http://labs.skookum.com/demos/barcampclt_physics/style.css">
  <style type="text/css" media="screen">
	  /* <![CDATA[ */
	  canvas{display:block; clear:both; float:none !important;}

	  /* ]]> */
  </style>
</head>
<body>
  <ul id="menu">
    <li><a href="http://labs.skookum.com/demos/barcampclt_physics/index.html">Index</a></li>
    <li><a href="http://labs.skookum.com/demos/barcampclt_physics/newton/1.html">Next</a></li>
</ul>
<img src="image7.jpg" alt="test"/>
  <canvas id="surface" width="600" height="400"></canvas>

<script type="text/javascript">
window.addEventListener('load', function () {
  // Get the canvas element.
  var elem = document.getElementById('surface');
  if (!elem || !elem.getContext) { return; }

  // Get the canvas 2d context.
  var context = elem.getContext('2d');
  if (!context || !context.getImageData || !context.putImageData || !context.drawImage) { return; }

  // Create a new image.
  var img = new Image();

  // Once it's loaded draw the image on canvas and invert the colors.
  img.addEventListener('load', function () {
    var x = 0, y = 0;

    // Draw the image on canvas.
    context.drawImage(this, x, y);

    // Get the pixels.
    var imgd = context.getImageData(x, y, this.width, this.height);
	var pix = imgd.data;
	console.log(pix.length);
    // Loop over each pixel and invert the color.
	for (var i = 0, n = pix.length; i < n; i += 4) {
	  pix[i] = 255 - pix[i]; // red
      pix[i+1] = 255 - pix[i+1]; // green
      pix[i+2] = 255 - pix[i+2]; // blue
	  console.log(pix[i]);
    }

    context.putImageData(imgd, x, y);
  }, false);

  img.src = 'image7.jpg';

}, false);

</script>

</body></html>