将图像放置到画布中的Alpha通道

Question

我需要找到画布中所有透明位置的顶部，左侧，最大宽度和最大高度值。

http://jsfiddle.net/alperxx/t521jra4/（小提琴）

我在画布上有4个透明的位置。但是我找不到真正的地方。第一个Alpha通道角颜色必须为红色。接下来是：黑色，黄色和绿色。但是我的小组是不正确的。

如果我确实完成了分组，则所有上传的照片都将放置在alpha位置。

我的流程在评论中。

    function alphaRatio(ctx) {
      var pixelData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);

      const data = pixelData.data;
      const pixel_groups = [];

      var total = 0;
      for (let i = 0, dx = 0; dx < data.length; i++, dx = i << 2) {
        if (data[dx + 3] == 0) {
          //First, I'm catching all transparent pixels.
          total++;
          var x = (dx / 4) % ctx.canvas.width;
          var y = ~~((dx / 4) / ctx.canvas.width);

          // if pixel after a last grouped item add to in.
          var found = false;
          if (pixel_groups.length) {
            for (im = 0; im < pixel_groups.length; im++) {
              last_pixels = pixel_groups[im][pixel_groups[im].length - 1];
              if (
                last_pixels.x + 1 == x || last_pixels.x - 1 == x ||
                last_pixels.y + 1 == y || last_pixels.y - 1 == y
              ) {
                found = true;
                pixel_groups[im].push({
                  x: x,
                  y: y
                });
                break;
              }
            }
          }
          if (!found) {
            pixel_groups.push([{
              x: x,
              y: y
            }]);
          }
        }
      }

      // i grouped all them
      if (pixel_groups.length) {
        console.debug(pixel_groups);
        for (i = 0; i < pixel_groups.length; i++) {
          var alphawidth = {};
          var alphaheight = {};
          for (im = 0; im < pixel_groups[i].length; im++) {
            //now lets calculate first pixel left and top for width and height 
            if (typeof(alphawidth['min']) === 'undefined') {
              alphawidth['min'] = pixel_groups[i][im].x;
              alphawidth['max'] = pixel_groups[i][im].x;
            } else {
              if (pixel_groups[i][im].x < alphawidth['min']) {
                alphawidth['min'] = pixel_groups[i][im].x;
              }
              if (pixel_groups[i][im].x > alphawidth['max']) {
                alphawidth['max'] = pixel_groups[i][im].x;
              }
            }

            if (typeof(alphaheight['min']) === 'undefined') {
              alphaheight['min'] = pixel_groups[i][im].y;
              alphaheight['max'] = pixel_groups[i][im].y;
            } else {
              if (pixel_groups[i][im].y < alphaheight['min']) {
                alphaheight['min'] = pixel_groups[i][im].y;
              }
              if (pixel_groups[i][im].y > alphaheight['max']) {
                alphaheight['max'] = pixel_groups[i][im].y;
              }
            }
          }

          // update group key for only x y w h
          pixel_groups[i] = {
            x: pixel_groups[i][0].x,
            y: pixel_groups[i][0].y,
            w: alphawidth['max'] - alphawidth['min'],
            h: alphaheight['max'] - alphaheight['min']
          };
        }

        // for test alpha places put a colour all corners 
        for (i = 0; i < pixel_groups.length; i++) {
          var colour = ['red', 'black', 'yellow', 'green'];
          canvas.add(new fabric.Circle({
            left: pixel_groups[i].x,
            top: pixel_groups[i].y,
            radius: 4,
            fill: colour[i],
            originX: 'center',
            originY: 'center',
            hasControls: false
          }));
          canvas.add(new fabric.Circle({
            left: pixel_groups[i].x + pixel_groups[i].w,
            top: pixel_groups[i].y + pixel_groups[i].h,
            radius: 4,
            fill: colour[i],
            originX: 'center',
            originY: 'center',
            hasControls: false
          }));
          canvas.add(new fabric.Circle({
            left: pixel_groups[i].x + pixel_groups[i].w,
            top: pixel_groups[i].y,
            radius: 4,
            fill: colour[i],
            originX: 'center',
            originY: 'center',
            hasControls: false
          }));

          canvas.add(new fabric.Circle({
            left: pixel_groups[i].x,
            top: pixel_groups[i].y + pixel_groups[i].h,
            radius: 4,
            fill: colour[i],
            originX: 'center',
            originY: 'center',
            hasControls: false
          }));

        }

        return pixel_groups;
      }
      return false;
    }