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

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

2.实现效果:

html5截取图片html5 canvasjs实现ps钢笔抠图 Bootstrap

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

3.实现思路:

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

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

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

至背景色为透明色(canvas也可以实现截图,但须要处理像素点实现背景透明,暂时还没实现,操持用C#后台代码实现)。

4、js

这是个中的js代码

5.总结:

不敷:当光标移动到线上时,判断一点是否在两点连成的直线上打算方法禁绝确,该当打算为一点是否在两点圆两条外切线所围成的矩形

内;钢笔点应为更换为小的div方格比较合理,像下面的矩形抠图;(思路:将存取的点坐标凑集和动态添加的小div方格建立对应关系

当拖动小方格时,触发事宜更新坐标点凑集,并重新渲染)。

6.这只是js钢笔抠图的一种办理方案,项目中现在这块还在改进,如果大家有好的方法或是资料的话,希望能分享一下。
感激

想要增加IT技能或转行IT行业的小伙伴们,可以千锋重庆IT培训班来看看。
千锋重庆IT培训机构100%面授课程,讲师专业的传授教化,让你半年快速节制专业的知识,实现高薪就业。