javascript - Canvas Black and White Image to Shape -


I have just loaded a simple image on a canvas.

Just a white circle background with its black.

What I am trying to convert turns that white area into a shape. This size will be used to detect the limit.

Am I assuming that I need a loop via pixel image data pixel? I did this before manipulating the color, but I'm not sure how I would like to know about saving this information in the "border" and / or "border outside".

A little more complicated:

Enter image details here < / p>

Thank you!

If the pixels below the mouse is black or white, then how to use context.getImageData to test it Do:

To get the main pixel array and test if any group of red, green or blue is near 255 (== white if all RGB 255 is equal to)

example Code and a demo:

  var canvas = document. GetElementById ("canvas"); Var ctx = canvas.getContext ("2D"); Var $ canvas = $ ("# canvas"); Var Canvas Offset = $ canvas.offet (); var offsetX = canvas offset Left; Var offsetY = canvasoffset.top; Var data; Var $ result = $ ("# result"); Var img = new image (); img.onload = Start; Img.crossOrigin = "anonymous"; Img.src = "https://dl.dropboxusercontent.com/u/139992952/multple/temp00.png"; Start the function () {canvas.width = img.width; Canvas.height = img.height; Ctx.drawImage (img, 0,0); Data = ctx.getImageData (0,0, canvas.width, canvas.height) .data; } Function handlemuseum (e) {e.preventDefault (); e.stopPropagation (); MouseX = parseInt (e.clientX-offsetX); Katar = parseInt (e.clientY-offsetY); Var isWhite = (data [(mouse + canvas. Wide + mousex) * 4]> 200); $ Results.text (isWhite "inside": "outside"); } $ ("# Canvas"). Mausamave (function (e) {handleMouseMove (e);});    

Comments

Popular posts from this blog

Pass DB Connection parameters to a Kettle a.k.a PDI table Input step dynamically from Excel -

multithreading - PhantomJS-Node in a for Loop -

c++ - MATLAB .m file to .mex file using Matlab Compiler -