js+html5 canvas实现ps钢笔抠图

html5 canvas+js实现ps钢笔抠图

1. 项目要求需要用js实现photoshop中钢笔抠图功能，就用了近三四天的时间去解决它，最终还是基本上把他实现了。

做的过程中走了不少弯路，最终一同事找到了canvans以比较核心的属性globalCompositeOperation = "destination-out",

属性可以实现通过由多个点构成的闭合区间设置成透明色穿透画布背景色或是背景图片，这样省了许多事。

2.实现效果：

鼠标点完之后会将所有的点连成闭合区间，并可自由拖拉任一点，当形成闭合区间后，可在任意两点之间添加新点进行拖拉。

3.实现思路：

设置两层div,底层设置图片，顶层设置canvas画布（如果将图片渲染到画布上，抠图时会闪烁，所以至于底层），在画布上监视

  鼠标事件反复渲染点及之间连线，形成闭合区间后将整体画布渲染小块背景图片，并将闭合区间渲染透明色。并把点的相对画布

坐标记录或更新到数组中去。截完图后，将点的坐标集合传回后台，由后台代码实现根据坐标点及图片宽度高度实现截图，并设

至背景色为透明色（canvas也可以实现截图，但需要处理像素点实现背景透明，暂时还没实现，计划用C#后台代码实现）。

4.js(写的不规范比较乱，大家就当参考吧)

  .canvasDiv {
   position: relative;
   border: 1px solid red;
   height: 400px;
   width: 400px;
   top: 50px;
   left: 100px;
   z-index: 0;
  }

  img {
   width: 400px;
   height: 400px;
   z-index: 1;
   position: absolute;
  }

  #canvas {
   position: absolute;
   border: 1px solid green;
   z-index: 2;
  }
  .btnCollection {
   margin-left: 100px;
  }
 

 5.总结：

不足：当光标移动到线上时，判断一点是否在两点连成的直线上计算方法不正确，应该计算为一点是否在两点圆两条外切线所围成的矩形内；钢笔点应为替换为小的div方格比较合理，像下面的矩形抠图；（思路：将存取的点坐标集合和动态添加的小div方格建立对应关系当拖动小方格时，触发事件更新坐标点集合，并重新渲染）。

以上所述是小编给大家介绍的js+html5 canvas实现ps钢笔抠图详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！