个人中心
gpt4 book ai didi

javascript - 从图像边缘创建路径

转载 作者：数据小太阳 更新时间：2023-10-29 04:07:07 24 4
gpt4 key购买 nike

我有一张背景透明的二值图像(例如 .png)。假设它看起来像一个具有不规则但实心形状的 Blob (没有孔，而且都是一体的)。

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

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

有哪些好的选择？到目前为止，我考虑过写一个 QuickHull插件 Caman ，但这感觉有点繁重。我用 canvas 标记了它，但这只是因为它看起来是一个很好的起点。

最佳答案

您可以使用“行进 Ant ”算法来确定图像的闭合子部分的轮廓路径。

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

算法最重要的部分是告诉它什么是/不是您想要的子部分。由于您只想在图像上包含非透明像素，因此您可以像这样定义如何选择像素:

// 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 中的行进 Ant 算法的注释示例代码:http://jsfiddle.net/m1erickson/UyG6L/

enter image description here enter image description here 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>

关于javascript - 从图像边缘创建路径，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23983461/

24 4 0
文章推荐： javascript - 向现有 MongoDB 文档添加一个字段(在 Node.js 中使用 Mongoose)
文章推荐： c# - 使用 MSBuild 在 Jenkins 中构建 .net 应用程序
文章推荐： javascript - AngularJS – $route.reload() 不工作
文章推荐： javascript - 无法使用 Javascript 访问 Polymer 自定义元素内的 Canvas 元素
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com