A stretchable image that has borders.
Similar to the [Android NinePatch]{@link https://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch}, but it only has the lines on the bottom and right edges to denote the stretchable area.
A NinePatch is a normal picture, but has an extra 1-pixel wide column on the right edge and bottom edge. The extra column contains a black line that denotes the tileable center portion of the image. The lines are used to divide the image into nine tiles that can be automatically repeated to stretch the picture to any size without distortion.
@constructor
@alias Splat.NinePatch
@param {external:image} image The source image to make stretchable.
function NinePatch(image) {
  this.img = image;
  var imgw = image.width - 1;
  var imgh = image.height - 1;

  var context = getContextForImage(image);
  var firstDiv = imgw;
  var secondDiv = imgw;
  var pixel;
  var alpha;
  for (var x = 0; x < imgw; x++) {
    pixel = context.getImageData(x, imgh, 1, 1).data;
    alpha = pixel[3];
    if (firstDiv === imgw && alpha > 0) {
      firstDiv = x;
    }
    if (firstDiv < imgw && alpha === 0) {
      secondDiv = x;
      break;
    }
  }
  this.w1 = firstDiv;
  this.w2 = secondDiv - firstDiv;
  this.w3 = imgw - secondDiv;

  firstDiv = secondDiv = imgh;
  for (var y = 0; y < imgh; y++) {
    pixel = context.getImageData(imgw, y, 1, 1).data;
    alpha = pixel[3];
    if (firstDiv === imgh && alpha > 0) {
      firstDiv = y;
    }
    if (firstDiv < imgh && alpha === 0) {
      secondDiv = y;
      break;
    }
  }
  this.h1 = firstDiv;
  this.h2 = secondDiv - firstDiv;
  this.h3 = imgh - secondDiv;
}