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
Post a Comment