canvas - Can't getImageData() in javascript with gif file; can with FillRect. What's wrong? -


looks getimagedata works when use fillrect create rect on canvas, doesn't work when draw gif on canvas despite drawing correctly , everything. have no idea why - security risk? help?

<html> <body>  <p>image use:</p> <img id="scream" width="230" height="60" src="http://www.thekitmaker.com/image/3.gif" alt="the scream">  <p>canvas:</p> <canvas id="mycanvas" width="230" height="60" style="border:1px solid #d3d3d3;"> browser not support html5 canvas tag. </canvas>  <script> function getpixel(imgdata, index) {   var = index*4, d = imgdata.data;   return [d[i],d[i+1],d[i+2],d[i+3]] // [r,g,b,a] }  // and/or  function getpixelxy(imgdata, x, y) {   return getpixel(imgdata, y*imgdata.width+x); }   window.onload = function() {     var c = document.getelementbyid("mycanvas");     var ctx = c.getcontext("2d");      //draw on canvas     var img = document.getelementbyid("scream");     ctx.drawimage(img,10,10,50,50);//,0,0);// c.width,c.height);     //ctx.fillstyle = "red";     //ctx.fillrect(10, 10, 50, 50);      //get image data     alert("h");      var imgdata = ctx.getimagedata(10, 10, 50, 50);     alert("h2");     // magic®     //getpixel(idt, 852);  // returns array [red, green, blue, alpha]     alert("p:"+getpixelxy(idt,1,1)[0]); // same pixel using x,y } </script>  </body> </html> 

you correct because of security reasons. if draw image different origin onto canvas, canvas marked "tainted" , can no longer image data it, among other things.

reference: http://www.w3.org/tr/html51/semantics.html#security-with-canvas-elements


Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -