javascript - Problem with getImageData function -
javascript - Problem with getImageData function -
so, i'm using function getimagedata on "context" variable i've made within of <script>
part, , when such draw rectangle ctx.getimagedata.data[0] show reddish value of rectangle drew on canvas. but, when import image , draw onto canvas, , seek utilize getimagedata.data[0] 0, makes no sense, i'm not sure why not reading image correctly. i've tried tutorials on they're vague , have segments written together.
so, when draw rectangle, color value comes out fine, again, when draw image, without drawing rectangle on canvas, never value of particular pixel on image.
can help me? here's currrent code:
<html> <head> <title> color test :) </title> </head> <body> <canvas id = "colortest" width = "500" height = "500"> please don't utilize shitty browsers :) </canvas> <script> //netscape.security.privilegemanage… var canvas = document.getelementbyid("colortest") , ctx = canvas.getcontext("2d") , image = new image() image.onload = function(){ ctx.drawimage(image,0,0) } image.src = 'pikachu.gif' ctx.fillstyle = "rgb(123,40,170)" ctx.fillrect(0,0,100,100) var imagedata = ctx.getimagedata(0,0,100,100) , spot = 0 while(imagedata.data[spot] == 0){ spot++ } console.log(imagedata.data[0]) </script> </body> </html>
does next alert sensible?
image.onload = function() { ctx.drawimage(image, 0, 0); var id = ctx.getimagedata(0,0,canvas.width,canvas.height); alert([id.data[0], id.data[1], id.data[2], id.data[3]].join(", ")); }
javascript image html5 canvas getimagedata
Comments
Post a Comment