javascript - Extrapolating pixel position form pixel value -
i"m attempting loop through pixels in black , white image , i've pieced code people have helped me come can seem result want. i'm trying loop through pixels of png image of white circle on black background. in code, loop should accessing red values of pixels , logging position in separate array.
could please try , clean code or provide own way of doing this? i'd know i'm doing wrong. i'm beginner @ coding, , need on subject.
<html> <head> </head> <body> <canvas id="canvas"></canvas> <script> var can = document.getelementbyid('canvas'); var ctx = can.getcontext('2d'); var img = new image(); img.onload = function(){ can.width = img.width; can.height = img.height; ctx.drawimage(img, 0, 0, img.width, img.height); var w = ctx.canvas.width, h = ctx.canvas.height; var id = ctx.getimagedata(0,0,w,h); var d = id.data; (var y = 0;y < h; ++y){ (var x = 0; x < w; ++x){ var i=(y*w+x)*4; var r=d[i], g=d[i+1], b=d[i+2], a=d[i+3]; } } } img.src = 'circle-image-alone-bw.png'; </script> </body>
as image data arranged quadruples (r, g, b, a) can loop through this:
for (var y = 0; y < d.length; y += 4) { /// skip 4 bytes each turn var red = d[y]; } it still blank data (all 0's) then:
1) didn't use onload properly:
var img = new image(); img.onload = function(){ can.width = img.width; can.height = img.height; ctx.drawimage(img, 0, 0, img.width, img.height); /// here go getimagedata getdata(); } img.src = 'circle-image-alone-bw.png'; function getdata() { var w = ctx.canvas.width, h = ctx.canvas.height; var id = ctx.getimagedata(0,0,w,h); var d = id.data; (var y = 0;y < h; ++y){ (var x = 0; x < w; ++x){ var i=(y*w+x)*4; var r=d[i], g=d[i+1], b=d[i+2], a=d[i+3]; } } } as image loading async risk not having access data when execute getimagedata right after setting source. therefor need wait until image load ready. execute function.
2) cors (a security feature) kicked in preventing image data getimagedata() or todataurl().
images used canvas must of same origin. if other domain used image (and server @ domain don't use access header) - or - file loaded file:// protocol, canvas defined 'dirty', meaning won't able data byte array.
you can check console security errors.
to around problem there 3 options:
- move image own server loads same origin page.
- modify source server implement accept-* header allow loading image other origins (this not easy if don't manage server yourself).
- use own server , page proxy:
http://myserver/getimage?http://otherserver
there no other ways around this.
Comments
Post a Comment