html5 自动扣图,js+html5 canvas实现ps钢笔抠图

html5 canvas+js实现ps钢笔抠图

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

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

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

2.实现效果：

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

3.实现思路：

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

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

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

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

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

$(function () {

var a = new tailorImg();

a.iniData();

});

//

var tailorImg=function()

{

this.iniData = function () {

//画布

this.can.id = "canvas";

this.can.w = 400;

this.can.h = 400;

this.can.roundr = 7;

this.can.roundrr = 3;

this.can.curPointIndex = 0;

this.can.imgBack.src = "gzf.png";

this.can.canvas = document.getElementById(this.can.id).getContext("2d");

//图片

this.img.w = 400;

this.img.h = 400;

this.img.image.src = "flower.jpg";

//加载事件：

//初始化事件：

var a = this;

var p = a.can.pointList;

$("#" + a.can.id).mousemove(function (e) {

if (a.can.paint) {//是不是按下了鼠标

if (p.length > 0) {

a.equalStartPoint(p[p.length - 1].pointx, p[p.length - 1].pointy);

}

a.roundIn(e.offsetX, e.offsetY);

}

//判断是否在直线上

//光标移动到线的附近如果是闭合的需要重新划线，并画上新添加的点

a.AddNewNode(e.offsetX, e.offsetY);

});

$("#" + a.can.id).mousedown(function (e) {

a.can.paint = true;

//点击判断是否需要在线上插入新的节点：

if (a.can.tempPointList.length > 0) {

a.can.pointList.splice(a.can.tempPointList[1].pointx, 0, new a.point(a.can.tempPointList[0].pointx, a.can.tempPointList[0].pointy));

//清空临时数组

a.can.tempPointList.length = 0;

}

});

$("#" + a.can.id).mouseup(function (e) {

//拖动结束

a.can.paint = false;

//拖动结束；

if (a.can.juPull) {<