html5 - Javascript Method to detect area of a PNG that is not transparent -

I'm looking for a JavaScript method to detect an image within a transparent PNG, for example, I have 9 40x680 I will make a PNG with a transparent canvas, then I will place a complete opacity object somewhere within that canvas.

I want to be able to locate the size (H / W) inside the canvas, and top + left position

Here is an example of the original image Here's an example of what I would like to achieve. (Bounding box overlay with bound margin data)

< P> Ive found a resource that detects some transparency, but I'm not sure how I'm seeing something like this.

  var imgData, width = 200, height = 200; $ ('# Mask'). Bind ('mausomov', function (if) (if (! ImgData) {init kanvas ()}} var imgPos = $ (this) .offset (), mousepause = {x: ev.pageX - imgPos.left, y: ev.pageY - imgPos.top}, pixelpos = 4 * (mousepos.x + height * mousepage), alpha = imgidata [pixel piece + 3]; $ ('# opacity') .text ('opacity =' + ( (100 * alpha / 255) & lt; <0) + '%');}); Function Init canvas () {var canvas = $ ('& lt; canvas width =' '+ width +' "height =" '+ height +' ""> "[0], CTX = canvas.gatecontax (' 2d '); Ctx.drawImage ($ (' # mask ') [0], 0, 0); ImgData = ctx.getImageData (0, 0, width, height);}   < P>     
 
 
 What you need to do:  < ul> 
 Obtain buffer  
 Get 32-bit reference of that buffer (if your other pixels are transparent then you have to restart the Uint32Array buffer sub  
 To find x1 edge, 0 - scan the width  
 Width scan - 0x2 to get the edge  
 Scan 0 - y1 height to find edge  
 Scan height - 0 y2 to find edge   
 These scans can be collected, but for simplicity, I use each step  
    
 Result:  
   
 When the image loads (when the image is small The rest of the example is garbage because you will know coordinates while drawing it - assuming here that the picture you attract is a small image in it):    ctx .drawImage (this, 0, 0, W, H); Receive image data for var idata = ctx.getImageData (0, 0, w, h), // canvas buffer = idata.data, // get buffer (unnes. Step) buffer 32 = new Uint32Array (buffer buffer) ), // 32-bit representation x, y, // iterators x1 = w, y1 = h, get x2 = 0, y2 = 0; / / Minimum / Maximum value   
 Then scan each edge. For the left edge, you scan the width of 0 for each line (non-customized):  
 Get the left edge (// buffer 32 [x + y * w] & gt;) for the // // (y = 0; y & lt; h; y ++) {// non- Transparent pixels? (X = 0; x & lt; w; x ++) if (x and lt; x1) x1 = x; // If the current is below the current update}}}   
 You simply reverse the X regorator for the right edge:  
  // Right edge For (y = 0; y & lt; h; y ++) {// line from line (x = w; x> = 0; x--) {// width to 0 if (buffer 32 [x + y * w]> 0) {if (x> x2) x2 = x; }}}   
 And for the top and bottom edges it is that the itatorurs have reversed:  
  // for the top sequence (x = 0 ; (Y = y; y; y; y = y; y;}}} = (x = 0; x & lt; w; x ++) {for (y = h; y & gt; ; = 0; y--) {if (buffer 32 [x + y * w] & gt; gets the bottom edge; 0) {if (y> y2) y2 = y;}}}   
 The resulting area is:  
  ctx.strokeRect (x1, y1, x2-x1, y2-y1);   
 You can make different adaptations that you can apply but they completely depend on the scenario like August If you know the approximate placements, then you do not have to repeat all the rows / columns.  
 You can estimate the placement except X number of xrex pixels and when you get a non-transparent pixel You can create the maximum search area on that and after that, but it is here. / P> 
 Hope it helps!