Identify all the frames in the image

Background

A given 2D array of size aXb represents pixels of an image.

Every pixel contains an array with 3 numbers [r,g,b] repressenting the pixel's red green and blue values.

r,b,g values span from 0 to 255.

The task is simple: Find all frames.

A frame:

• Has a consistant color throughout. - Most basic example is the blue square.
  (The red square works, but the yellow one doesn't since it is not continuous.)
• Complete frames where all internal cells have colors that are identical to the color of the frame are NOT valid frames. In other words, if a frame is a solid block consisting of only one color, then it is not valid.
• Can overlap if the color is continous.
  Notice there are 3 black frames. The one touching the top left, the one touching the bottom, and a small one where they meet.
• Frames are always 1 pixel thick. So, a 9x9 black frame inside of a 16x16 black frame are still considered as two seperate frames.

function findFrames(img) gets img (a 2d array) and returns an array of objects representing the top left corner of the frame, it's width(in pixels) and its height:

  {
    tl:[y,x],
    w: width,
    h: height
  }

So for the following image:

The input will be:

  var img1 = [
    [
      [0,0,0],[0,0,0],[0,0,0]
    ],
    [
      [0,0,0],[255,255,255],[0,0,0]
    ],
    [
      [0,0,0],[0,0,0],[0,0,0,]
    ]
  ]
  

And the function will return:

  findFrames(img1) = [
    {
    tl:[0,0],
    w:3,
    h:3}
  ]