Question

我正在寻找一些图书馆，可以让我的用户从上传的图像中进行自由选择，并获得其坐标。每个自由形式选择将是我的一个对象。例如 Image example

这将是我的形象，我将选择完整的垫区自由形式，然后复制其坐标。

如果有其他api，请告诉我们。

注意：这里我说的是自由选择 NOT RECTANGULAR 。如果您不确定，可以看看这里 here和here

Answer 1

[根据提问者的评论添加回答]

你想要的是边缘检测 - 为一些严重的编码做好准备。

以下是Wiki所说的关于共同边缘检测算法的内容，称为＆＃34;行进方块＆＃34;：

http://en.wikipedia.org/wiki/Marching_squares。

行进广场的一个好处是d3（d3js.org）。

http://code.google.com/p/testprogramming/source/browse/trunk/javascript/svg/d3/src/geom/contour.js?r=383

这个实现很不错，因为它可以让你定义包括的内容＆amp;在确定目标选择时排除了什么。

您将需要此功能，因为您的选择并不像隔离透明像素和非透明像素那么简单。

例如，要隔离您的猫，您首先必须将搜索区域限制为靠近猫的像素。您可以使用我的原始答案执行此操作，该答案通过矩形选择生成新图像。

然后你必须创建一个算法，其中包括像猫一样的较暗像素范围，并排除椅子/地板/墙壁中较亮的像素。

你必须成为隔离技术的专家。

[原始答案]

这是一个html5画布演示：http://jsfiddle.net/m1erickson/Bc3uK/

enter image description here

这里有一些带注释的代码供您开始学习：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" 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 $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var scrollX=$canvas.scrollLeft();
    var scrollY=$canvas.scrollTop();

    // create a temporary canvas
    // used to clip the selected area from the whole image
    var tempCanvas=document.createElement("canvas");
    var tempCtx=tempCanvas.getContext("2d");

    var isDown=false;

    var $stats=$("#stats");

    var cw,ch,startX,startY,mouseX,mouseY

    // load and draw the main image on the canvas
    var img=new Image();
    img.crossOrigin="anonymous";
    img.onload=start;
    img.src="https://dl.dropboxusercontent.com/u/139992952/multple/selection.png";
    function start(){

        // size the canvas to the image size
        // and draw the image on the canvas
        cw=canvas.width=img.width;
        ch=canvas.height=img.height;
        ctx.drawImage(img,0,0);

        // listen for mouse events
        $("#canvas").mousedown(function(e){handleMouseDown(e);});
        $("#canvas").mousemove(function(e){handleMouseMove(e);});
        $("#canvas").mouseup(function(e){handleMouseUp(e);});
        $("#canvas").mouseout(function(e){handleMouseOut(e);});

    }


    function handleMouseDown(e){

      // tell the browser we're handling this event
      e.preventDefault();
      e.stopPropagation();

      // calculate the current mouse position
      // this is the start position of the drag
      startX=parseInt(e.clientX-offsetX);
      startY=parseInt(e.clientY-offsetY);

      // set a flag indicating we've started dragging
      isDown=true;
    }

    function handleMouseUp(e){

      // tell the browser we're handling this event
      e.preventDefault();
      e.stopPropagation();

      // get the current mouse position
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // turn off the drag flag
      isDown=false;

      // calc the width/height of the selection
      var w=mouseX-startX;
      var h=mouseY-startY;

      // clip the selection and draw it to the temporary canvas
      // then create a new image from the selection
      // and add it to the page
      tempCanvas.width=w;
      tempCanvas.height=h;
      tempCtx.drawImage(canvas,startX,startY,w,h,0,0,w,h);
      var newImage=new Image();
      newImage.onload=function(){
          document.body.appendChild(newImage);
      }
      newImage.src=tempCanvas.toDataURL();

    }

    function handleMouseOut(e){

      // tell the browser we're handling this event
      e.preventDefault();
      e.stopPropagation();

      // unset the drag flag
      isDown=false;
    }

    function handleMouseMove(e){

      // if we're not dragging, just exit
      if(!isDown){return;}

      // tell the browser we're handling this event
      e.preventDefault();
      e.stopPropagation();

      // calc the current mouse position
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // calc current width/height
      var w=mouseX-startX;
      var h=mouseY-startY;

      // display starting/ending drag points and current width/height
      $stats.text("x1/y1: "+startX+"/"+startY+", x2/y2: "+mouseX+"/"+mouseY+", width/height: "+w+"/"+h);

      // clear and redraw the canvas showing the current drag rectangle
      ctx.clearRect(0,0,cw,ch);
      ctx.drawImage(img,0,0);
      ctx.strokeRect(startX,startY,w,h);

    }

}); // end $(function(){});
</script>
</head>
<body>
    <h4 id=stats>Drag mouse to make selection</h4>
    <canvas id="canvas" width=300 height=300></canvas><br>
</body>
</html>

使用kinetic和/或html5画布自由选择表格

1 个答案: