使用Dynamic js和/或html5画布的自由形式选择_Html_Image Processing_Kineticjs

使用Dynamic js和/或html5画布的自由形式选择

html image-processing

使用Dynamic js和/或html5画布的自由形式选择,html,image-processing,kineticjs,Html,Image Processing,Kineticjs,我正在寻找一些库，可以让我的用户从上传的图像做自由形式的选择，并获得其坐标。每个自由形式的选择将是我的一个对象。比如说这将是我的图像，我将选择完整的垫区自由形式的方式，然后复制其坐标如果有其他api可用，请告知注意：这里我说的是自由形式选择，而不是矩形选择。如果你不确定，你可以看看这里和[根据提问者的评论添加到答案中] 你想要的是边缘检测——准备好一些非常密集的编码下面是Wiki对一种称为行进方块的常见边缘检测算法的介绍：行军广场的一个很好的实现是在D3D3JS.org中这个实

我正在寻找一些库，可以让我的用户从上传的图像做自由形式的选择，并获得其坐标。每个自由形式的选择将是我的一个对象。比如说

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

如果有其他api可用，请告知

注意：这里我说的是自由形式选择，而不是矩形选择。如果你不确定，你可以看看这里和

[根据提问者的评论添加到答案中]

你想要的是边缘检测——准备好一些非常密集的编码

下面是Wiki对一种称为行进方块的常见边缘检测算法的介绍：

行军广场的一个很好的实现是在D3D3JS.org中

这个实现很好，因为它允许您定义在确定目标选择时包含的内容和排除的内容

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

例如，要隔离猫，首先必须将搜索区域限制为猫附近的像素。你可以使用我的原始答案，从一个矩形选择中生成一个新的图像

然后，您必须创建一个算法，将较暗像素的范围包括为cat，并排除椅子/地板/墙壁中较亮的像素

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

[原答覆]

下面是一个html5画布演示：

下面是一些带注释的代码供您开始学习：

<!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>

我想有一个自由形式的选择，请看这里，就像只选择猫和它的坐标精确。你想要的是边缘检测。有关学习和实现边缘检测的一些链接，请参见我答案的补充。请看一看