how to get the pixel data from a canvas filter it and create a 2 canvas.

how to get the pixel data from a canvas filter it and create a 2 canvas.

Hello,


My question is how can I get the values of the pixels in a canvas stored in a 1 dimension array.

I have been able to know the values of the pixel of a photo and transform them in canvas.

It seems stupid but I cannot find on the web how to get the data of a canvas.

In the example here I load a first canvas from images=> OK

Now I want to get the data from the first canvas to filter it and create a second canvas.

Can some one help me please?


  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title> EE Q_28383720 </title>
  6. <script src="http://code.jquery.com/jquery.min.js"></script>
  7. <style>

  9. .icone
  10. {
  11. margin-left:0px;
  12. }


  15. .icone-1 { background-position: left top }
  16. .icone-2 { background-position: 14.2857% top }
  17. .icone-3 { background-position: 28.5714% top }
  18. .icone-4 { background-position: 42.8571% top }
  19. .icone-5 { background-position: 57.1428% top }
  20. .icone-6 { background-position: 71.4285% top }
  21. .icone-7 { background-position: 85.7142% top }
  22. .icone-8 { background-position: right top }





  28. ul
  29. {
  30. padding:0px;
  31. border:3px solid blue;
  32. display: inline-block;
  33. }

  35. .icone li {
  36.   margin:auto;
  37.   text-align:center; /* non*/
  38.   vertical-align:bottom;
  39.   padding:0px;
  40.   width: 75px;
  41.   height: 100px;
  42.   border-radius:16px;
  43.   border: solid white 5px;
  44.   color: white;
  45.   opacity: 1;
  46.   background-image: url("http://www.davidinlove.com/img/sprite_menu_DT.jpg");
  47.   background-repeat: no-repeat;
  48.   display: inline-block;
  49.   list-style-type:none;
  50. }

  52. .menuli
  53. {
  54. display: inline-block;
  55. margin-top: 60px;
  56. padding: auto;
  57. width: 99%;
  58. text-align:center;
  59. border-radius:5px;
  60. bottom: 0;
  61. background-color: rgb(24,24,24); /* Pour les anciens navigateurs */
  62. background-color: rgba(24,24,24,0.6);
  63. }
  64. </style>
  65. </head>
  66. <body>
  67.   <div id="id-menu" class="c-menu">
  68.     SPRITE<br/>
  69.     <ul class="icone">
  70.       <a href="#" id = "IMG1" ><li class="icone-1" id = "IMG1child" ><div class="menuli">Draw the <br\>eiffel tower</div></li></a>
  71.       <a href="#" id = "IMG2" ><li class="icone-2" id = "IMG2child" ></li></a>
  72.       <a href="#" id = "IMG3" ><li class="icone-3" id = "IMG3child" ></li></a>
  73.       <a href="#" id = "IMG4" ><li class="icone-4" id = "IMG4child" ></li></a>
  74.       <a href="#" id = "IMG5" ><li class="icone-5" id = "IMG5child" ></li></a>
  75.       <a href="#" id = "IMG6" ><li class="icone-6" id = "IMG6child" ></li></a>
  76.       <a href="#" id = "IMG7" ><li class="icone-7" id = "IMG7child" ></li></a>
  77.       <a href="#" id = "IMG8" ><li class="icone-8" id = "IMG8child" ></li></a>
  78.       </ul>
  79.     </ul>
  80.     </div>

  82. <hr>
  83. CANVAS FROM PICTURE</br>
  84. <canvas id="myCanvas_OUT0" width="75" height="100"></canvas>

  86. </br>
  87. FILTERING EFFECT ON CANVAS</br>
  88. <canvas id="myCanvas_OUT21" width="75" height="100"></canvas>


  92. <script>




  97. function custompos(p, isY, cnv, img) {
  98.   var ti, tc;
  99.   if (isY) {
  100.     ti = img.height;
  101.     tc = 100; // cnv.height;
  102.     p = p.replace('top', '0').replace('bottom', '100%'); // ti - tc
  103.   } else {
  104.     ti = img.width;
  105.     tc = 75; // cnv.width;
  106.     p = p.replace('left', '0').replace('right', '100%'); // ti - tc
  107.   }
  108.   if (p.substr(-1) == '%') {
  109.     p = Number(p.substr(0, p.length - 1)) * (ti - tc) / 100;
  110.   }
  111.   return p;
  112. }


  115. $("a").click( function(e) {
  116.   e.preventDefault();
  117.   img_srcout0="";
  118.   img_srcout0= $(this).children(":first").css('background-image').replace(/^url\((['"]?)(.*?)\1\).*$/i, "$2");
  119.   var bpos = $(this).children(":first").css('background-position');
  120.   elemout0 = document.getElementById("myCanvas_OUT0");
  121.   if (elemout0 && elemout0.getContext) 
  122.   {
  123.     contextout0 = elemout0.getContext("2d");
  124.     if (contextout0) 
  125.     {
  126.       imgout0=new Image();
  127.       imgout0.onload=function(){

  129.         // some extra code to get position, this is not completely generic!
  130.         var bposa = bpos.split(' ');
  131.         var bposx = custompos(bposa[0], false, elemout0, imgout0);
  132.         var bposy = custompos(bposa[1], true, elemout0, imgout0);
  133.         contextout0.drawImage(imgout0,-bposx,-bposy);

  135.         //imgdout0 = contextout0.getImageData(0, 0, 303,539);
  136.         //pixout0 = imgdout0.data;
  137.       };
  138.       imgout0.src=img_srcout0;
  139.     }
  140.   }
  141. });



  145. $("#myCanvas_OUT0").on("click", function(e) {  

  147. //GET THE DATA OF THE myCanvas_OUT0

  149. var canvas_out0 = $("#myCanvas_OUT0");
  150. var canvasout0Position = {
  151. x: canvas_out0.offset().left,
  152. y: canvas_out0.offset().top
  153. };


  156. var elemout0 = document.getElementById("myCanvas_OUT0");
  157. if (elemout0 && elemout0.getContext) 
  158. {
  159. var contextout0 = elemout0.getContext("2d");
  160. }

  162. //********** It seems here is the problem
  163. //I need to know how to get the array with the values of the pixels of the canvas
  164. //This codes seems OK to take the data from a photo but my website will process data of canvas
  166. var imgdout0 = contextout0.getImageData(0, 0, 150,200);
  167. var pixout0 = imgdout0.data;
  170. //Define the second canvas
  173. var canvas_out21 = $("#myCanvas_OUT21");
  174. var canvasout21Position = {
  175. x: canvas_out21.offset().left,
  176. y: canvas_out21.offset().top
  177. };
  178. var elemout21 = document.getElementById("myCanvas_OUT21");
  179. if (elemout21 && elemout21.getContext) 
  180. {
  181.  var contextout21 = elemout21.getContext("2d");
  182.  

  185. }
  187. var imgdout21 = contextout21.getImageData(0, 0, 150,200);
  188. var pixout21 = new Array();

  191. //FILTER THE DATA
  192. //This I do here in a simple example 
  194. for(j=0;j<pixout0.length;j+=4)
  195. { 
  196. pixout21[j]=pixout0[j]/2 ;
  197. pixout21[j+1]=pixout0[j+1]/2 ;
  198. pixout21[j+2]=pixout0[j+2]/2 ;
  199. pixout21[j+3]=255;
  200. }
  204. //DISPLAY DATA IN The myCanvas_OUT21
  206. contextout21.putImageData(imgdout21, 0, 0);
  208. });

  210. </script>

  212. </body>
  213. </html>

David  ( @webtecgeek   www.thecacaocafe.com )