How can I change data-src attribut of a canvas in jquery

How can I change data-src attribut of a canvas in jquery

Hi,

In a previous post I've learned how to load a canvas from png.
It is great but now I feel not very pride because I have a technical problem I cannot solve.
I would like to load the data of different png one after one another.

My idea is to do a setinterval just specifying the data-src before execute for different images.

The problem is I don't find how to change data-src of canvas with JQUERY.

Here is my code.

Can some one just tell me where and what I must include to load for example testbis.png?


Thanks!

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>ANIMATION with timer: a solution very difficult to apply</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7. <script src="http://code.jquery.com/jquery-2.1.0.js"></script>
  8. </script>
  9. </head>
  10. <body>
  11. <canvas id="myCanvas_IN" width="448" height="448" data-src="http://www.thecacaocafe.com/img/test.png">
  12. </canvas>
  13. <br>
  14. <script>

  16. $(function() {
  18. $("canvas[data-src]").each(function(){
  19. var img = new Image,
  20. canvas = this
  21. img.onload = function(){
  22. canvas.getContext("2d").drawImage(img, 0, 0);
  23. // at this point you have a loaded canvas, and can start playing with it.
  24. contextin = canvas.getContext("2d");
  25. imgdin = contextin.getImageData(0, 0, 448, 448);
  26. pixin = imgdin.data;
  27.  
  28.  
  29.  
  30. for (var i=0;i<pixin.length;i++)
  31. {
  32. pixin[i*4  ] = (pixin[i*4  ] < 125)?pixin[i*4  ]*2:pixin[i*4  ];
  33. pixin[i*4 +1 ] = pixin[i*4 +1 ]/2;
  34. pixin[i*4 +2 ] = pixin[i*4 +2 ]/2;
  35. pixin[i*4 +3 ] = 255;
  36. }
  38. contextin.putImageData(imgdin, 0, 0);
  39.  
  40.  
  41.  
  42.  
  43.  
  44.  
  45. }
  46. img.src=$(canvas).data("src")
  47. })
  48. });

  50. </script>
  51. </body>
  52. </html>

David  ( @webtecgeek   www.thecacaocafe.com )