Javascript 从图像边缘创建路径
我有一个二值图像，例如背景透明的png。让我们假设它看起来像一个不规则的，但坚实的形状没有洞，它是一个整体 在JavaScript中，我想创建一个表示边界多边形的路径。多边形应该是凸的，但不一定是凸的。输出可以是一个坐标列表： [0,0]，[0,5]，[7,0]Javascript 从图像边缘创建路径,javascript,image-processing,canvas,Javascript,Image Processing,Canvas,我有一个二值图像，例如背景透明的png。让我们假设它看起来像一个不规则的，但坚实的形状没有洞，它是一个整体 在JavaScript中，我想创建一个表示边界多边形的路径。多边形应该是凸的，但不一定是凸的。输出可以是一个坐标列表： [0,0]，[0,5]，[7,0] 有哪些好的选择？到目前为止，我已经考虑过在中编写插件，但这感觉有点沉重。我用canvas标记了它，但只是因为它似乎是一个很好的起点。您可以使用marching ants算法来确定图像闭合部分的轮廓路径 行军蚂蚁算法创建一组表示轮廓路径的
有哪些好的选择？到目前为止，我已经考虑过在中编写插件，但这感觉有点沉重。我用canvas标记了它，但只是因为它似乎是一个很好的起点。您可以使用marching ants算法来确定图像闭合部分的轮廓路径 行军蚂蚁算法创建一组表示轮廓路径的点。然后可以使用这些点围绕图像的子部分绘制闭合路径 算法最重要的部分是告诉它什么是/不是你想要的部分。由于您希望在图像上仅包含不透明像素，因此可以定义如何选择像素，如下所示：
// 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);
}
<!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>
这是纯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;
}
您是在寻找一个要实现的算法，还是一个可以实现这一点的JavaScript库？这实际上取决于可用的库。我还没有看到任何能做到这一点的。当然，这些片段是由各种库实现的，但我正在寻找一种使用它们的策略，或者不使用它们。答案很好！非常感谢。