Question

我有一个背景透明的二进制图像（例如.png）。让我们说它看起来像一个不规则但形状坚固的斑点（没有洞，它们都是一体的）。

在JavaScript中，我想创建一个表示边界多边形的路径。多边形应该是凸的，但不一定是凸的。输出可以只是一个坐标列表：

[0, 0], [0, 5], [7, 0]

有什么好的选择？到目前为止，我已经考虑在QuickHull中编写一个Caman插件，但这感觉有点重要。我用canvas标记了这一点，但这只是因为它似乎是一个很好的起点。

Answer 1

你可以使用＆＃34;行进蚂蚁＆＃34;用于确定图像的闭合子部分的轮廓路径的算法。

行进蚂蚁算法创建一组表示轮廓路径的点。然后，您可以使用这些点在图像的子部分周围绘制闭合路径。

该算法最重要的部分是告诉它什么是你想要的小节的一部分。由于您只想在图片上包含非透明像素，因此您可以定义如何选择像素：

// This is used by the marching ants algorithm
// to determine the outline of the non-transparent
// pixels on the image
// The data[] array is the pixel array fetched by context.getImageData

var defineNonTransparent=function(x,y){
    var a=data[(y*cw+x)*4+3];
    return(a>20);
}

以下使用D3中的行进蚂蚁算法进行了带注释的示例代码：http://jsfiddle.net/m1erickson/UyG6L/

enter image description here

此示例使用.png作为源图像。如果你有一个blob，你将不得不将你的blob转换为.png格式。

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var cw=canvas.width;
    var ch=canvas.height;

    // checkbox to show/hide the original image
    var $showImage=$("#showImage");
    $showImage.prop('checked', true);

    // checkbox to show/hide the path outline
    var $showOutline=$("#showOutline");
    $showOutline.prop('checked', true);

    // an array of points that defines the outline path
    var points;

    // pixel data of this image for the defineNonTransparent 
    // function to use
    var imgData,data;

    // This is used by the marching ants algorithm
    // to determine the outline of the non-transparent
    // pixels on the image
    var defineNonTransparent=function(x,y){
        var a=data[(y*cw+x)*4+3];
        return(a>20);
    }

    // load the image
    var img=new Image();
    img.crossOrigin="anonymous";
    img.onload=function(){

        // draw the image
        // (this time to grab the image's pixel data
        ctx.drawImage(img,canvas.width/2-img.width/2,canvas.height/2-img.height/2);

        // grab the image's pixel data
        imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
        data=imgData.data;

        // call the marching ants algorithm
        // to get the outline path of the image
        // (outline=outside path of transparent pixels
        points=geom.contour(defineNonTransparent);

        ctx.strokeStyle="red";
        ctx.lineWidth=2;

        $showImage.change(function(){ redraw(); });

        $showOutline.change(function(){ redraw(); });

        redraw();

    }
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/sun.png";

    // redraw the canvas
    // user determines if original-image or outline path or both are visible
    function redraw(){

        // clear the canvas
        ctx.clearRect(0,0,canvas.width,canvas.height);

        // draw the image
        if($showImage.is(':checked')){
            ctx.drawImage(img,canvas.width/2-img.width/2,canvas.height/2-img.height/2);
        }

        // draw the path (consisting of connected points)
        if($showOutline.is(':checked')){
            // draw outline path
            ctx.beginPath();
            ctx.moveTo(points[0][0],points[0][4]);
            for(var i=1;i<points.length;i++){
                var point=points[i];
                ctx.lineTo(point[0],point[1]);
            }
            ctx.closePath();
            ctx.stroke();
        }

    }


}); // end $(function(){});
</script>

<script>
// this is a "marching ants" algorithm used to calc the outline path
(function() {
    // d3-plugin for calculating outline paths
    // License: https://github.com/d3/d3-plugins/blob/master/LICENSE
    //
    // Copyright (c) 2012-2014, Michael Bostock
    // All rights reserved.
    //
    //  Redistribution and use in source and binary forms, with or without
    //  modification, are permitted provided that the following conditions are met:
    //* Redistributions of source code must retain the above copyright notice, this
    //  list of conditions and the following disclaimer.
    //* Redistributions in binary form must reproduce the above copyright notice,
    //  this list of conditions and the following disclaimer in the documentation
    //  and/or other materials provided with the distribution.
    //* The name Michael Bostock may not be used to endorse or promote products
    //  derived from this software without specific prior written permission.
    // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL MICHAEL BOSTOCK BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 
    geom = {}; 
    geom.contour = function(grid, start) { 
      var s = start || d3_geom_contourStart(grid), // starting point 
          c = [],    // contour polygon 
          x = s[0],  // current x position 
          y = s[1],  // current y position 
          dx = 0,    // next x direction 
          dy = 0,    // next y direction 
          pdx = NaN, // previous x direction 
          pdy = NaN, // previous y direction 
          i = 0; 

      do { 
        // determine marching squares index 
        i = 0; 
        if (grid(x-1, y-1)) i += 1; 
        if (grid(x,   y-1)) i += 2; 
        if (grid(x-1, y  )) i += 4; 
        if (grid(x,   y  )) i += 8; 

        // determine next direction 
        if (i === 6) { 
          dx = pdy === -1 ? -1 : 1; 
          dy = 0; 
        } else if (i === 9) { 
          dx = 0; 
          dy = pdx === 1 ? -1 : 1; 
        } else { 
          dx = d3_geom_contourDx[i]; 
          dy = d3_geom_contourDy[i]; 
        } 

        // update contour polygon 
        if (dx != pdx && dy != pdy) { 
          c.push([x, y]); 
          pdx = dx; 
          pdy = dy; 
        } 

        x += dx; 
        y += dy; 
      } while (s[0] != x || s[1] != y); 

      return c; 
    }; 

    // lookup tables for marching directions 
    var d3_geom_contourDx = [1, 0, 1, 1,-1, 0,-1, 1,0, 0,0,0,-1, 0,-1,NaN], 
        d3_geom_contourDy = [0,-1, 0, 0, 0,-1, 0, 0,1,-1,1,1, 0,-1, 0,NaN]; 

    function d3_geom_contourStart(grid) { 
      var x = 0, 
          y = 0; 

      // search for a starting point; begin at origin 
      // and proceed along outward-expanding diagonals 
      while (true) { 
        if (grid(x,y)) { 
          return [x,y]; 
        } 
        if (x === 0) { 
          x = y + 1; 
          y = 0; 
        } else { 
          x = x - 1; 
          y = y + 1; 
        } 
      } 
    } 

    })();
</script>
</head>
<body>
    <input type="checkbox" id="showImage" />Show Image<br>
    <input type="checkbox" id="showOutline" />Show Outline Path<br>
    <canvas id="canvas" width=300 height=450></canvas>
</body>
</html>

Answer 2

这是纯JS解决方案，不依赖于任何第三方库。

function getOutline(ctx,pointX,pointY,w,h){
    var imageData = ctx.getImageData(pointX, pointY, w, h);
    var data = imageData.data;
    var outline=[];
    for(var x=0;x<w;x++){
        for(var y=0;y<h;y++){
            var index = (x + y * w) * 4;

            var nextIndex, lastIndex, leftIndex, rightIndex;
            nextIndex = (x + (y +1) * w ) * 4;
            lastIndex = (x + (y -1) * w ) * 4;
            leftIndex = index - 4;
            rightIndex = index + 4;

            var cx={"X":x,"Y":y}; 
            if(data[index+3] !== 0 && 
                ( (data[nextIndex+3] === 0)
                    || ( data[lastIndex+3] === 0)
                    || ( data[leftIndex+3] === 0)
                    || ( data[rightIndex+3] === 0) 
                )
            ){
                outline.push(cx);
            }
        }
    }
    return outline;
}

Demo

从图像边缘创建路径

2 个答案: