canvas实现图片裁剪功能

看看效果图吧

代码已经用构造函数和原生方式封闭好了。

附上主要方法：

            //画出背景            Selection.prototype.drawScene = function () { // main drawScene function                this.context.drawImage(this.image, 0, 0, this.canvas.width, this.canvas.height);                this.context.fillStyle = 'rgba(0, 0, 0, 0.5)';                this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);                // 画出选区                this.draw();            }            //画出选区            Selection.prototype.draw = function () {                this.context.strokeStyle = '#fff';                this.context.lineWidth = 0.5;                this.context.strokeRect(this.x, this.y, this.w, this.h);                // 绘制选区图像                if (this.w > 0 && this.h > 0) {                    this.context.drawImage(this.image, this.x, this.y, this.w, this.h, this.x, this.y, this.w, this.h);                }                // 画出四个角的调整方块                this.context.fillStyle = 'rgba(255, 255, 255, 1)';                this.context.fillRect(this.x - this.iCSize[0], this.y - this.iCSize[0], this.iCSize[0] * 2, this.iCSize[0] * 2);                this.context.fillRect(this.x + this.w - this.iCSize[1], this.y - this.iCSize[1], this.iCSize[1] * 2, this.iCSize[1] * 2);                this.context.fillRect(this.x + this.w - this.iCSize[2], this.y + this.h - this.iCSize[2], this.iCSize[2] * 2, this.iCSize[2] * 2);                this.context.fillRect(this.x - this.iCSize[3], this.y + this.h - this.iCSize[3], this.iCSize[3] * 2, this.iCSize[3] * 2);                this.drawLine();            }            //画出九宫格            Selection.prototype.drawLine = function () {                this.context.strokeStyle = "#fff";                this.context.strokeRect(this.x, this.y + parseFloat(this.h / 3), this.w, 0.05);                this.context.strokeRect(this.x, this.y + parseFloat(this.h / 3) * 2, this.w, 0.05);                this.context.strokeRect(this.x + parseFloat(this.w / 3), this.y, 0.05, this.h);                this.context.strokeRect(this.x + parseFloat(this.w / 3) * 2, this.y, 0.05, this.h);            }

//鼠标移动事件            Selection.prototype.mousemove = function (e) {var addd=this.GetAbsoluteLocationEx(this.canvas).absoluteTop;                var iMouseX = Math.floor(e.pageX - this.GetAbsoluteLocationEx(this.canvas).absoluteLeft);                var iMouseY = Math.floor(e.pageY - this.GetAbsoluteLocationEx(this.canvas).absoluteTop);                if (iMouseX == 0) {                    this.x = 0;                }                // 拖整体的选择器                if (iMouseX - this.px >= 0 || iMouseY - this.y >= 0) {                    this.canvas.style.cursor = "move";                    if (this.bDragAll) {                        this.context.clearRect(this.x, this.y, this.w, this.h);                        this.x = iMouseX - this.px;                        this.y = iMouseY - this.py;                        //                        if (iMouseX == this.canvas.width) {                         //                            this.x=                        //                        }                        if (this.x < 0) {                            this.x = 0;                        }                        if (this.y < 0) {                            this.y = 0;                        }                        if ((this.w + this.x) > this.canvas.width) {                            this.x = this.x - (this.w + this.x - this.canvas.width);                        }                        if ((this.h + this.y) > this.canvas.height) {                            this.y = this.y - (this.h + this.y - this.canvas.height);                        }                    }                }                for (i = 0; i < 4; i++) {                    this.bHow[i] = false;                    this.iCSize[i] = this.csize;                }                // 悬停在调整方块                if (iMouseX > this.x - this.csizeh && iMouseX < this.x + this.csizeh &&            iMouseY > this.y - this.csizeh && iMouseY < this.y + this.csizeh) {                    this.bHow[0] = true;                    this.iCSize[0] = this.csizeh;                    this.canvas.style.cursor = "nw-resize";                }                //this.canvas.style.cursor = "default";                if (iMouseX > this.x + this.w - this.csizeh && iMouseX < this.x + this.w + this.csizeh &&            iMouseY > this.y - this.csizeh && iMouseY < this.y + this.csizeh) {                    this.bHow[1] = true;                    this.iCSize[1] = this.csizeh;                    this.canvas.style.cursor = "ne-resize";                }                if (iMouseX > this.x + this.w - this.csizeh && iMouseX < this.x + this.w + this.csizeh &&            iMouseY > this.y + this.h - this.csizeh && iMouseY < this.y + this.h + this.csizeh) {                    this.bHow[2] = true;                    this.iCSize[2] = this.csizeh;                    this.canvas.style.cursor = "se-resize";                }                if (iMouseX > this.x - this.csizeh && iMouseX < this.x + this.csizeh &&            iMouseY > this.y + this.h - this.csizeh && iMouseY < this.y + this.h + this.csizeh) {                    this.bHow[3] = true;                    this.iCSize[3] = this.csizeh;                    this.canvas.style.cursor = "sw-resize";                }                // 如果拖动方块                var iFW, iFH;                var iFX, iFY;                if (this.bDrag[0]) {                    iFX = iMouseX - this.px;                    iFY = iMouseY - this.py;                    iFW = this.w + this.x - iFX;                    //iFH = this.h + this.y - iFY;iFH=this.selectContral(iFW);                }                if (this.bDrag[1]) {                    iFX = this.x;                    iFY = iMouseY - this.py;                    iFW = iMouseX - this.px - iFX;                    //iFH = this.h + this.y - iFY;iFH=this.selectContral(iFW);                }                if (this.bDrag[2]) {                    iFX = this.x;                    iFY = this.y;                    iFW = iMouseX - this.px - iFX;                    //iFH = iMouseY - this.py - iFY;iFH=this.selectContral(iFW);                }                if (this.bDrag[3]) {                    iFX = iMouseX - this.px;                    iFY = this.y;                    iFW = this.w + this.x - iFX;                    //iFH = iMouseY - this.py - iFY;iFH=this.selectContral(iFW);                }                if ((iFW + this.x) > this.canvas.width) {                    var a = (iFW + this.x) > this.canvas.width;                }                //判断选区不能太小，大于四个角宽度                if (iFW > this.csizeh * 2 && iFH > this.csizeh * 2) {                    this.w = iFW;                    this.h = iFH;                    this.x = iFX;                    this.y = iFY;                }                this.drawScene();            }            //鼠标按下事件            Selection.prototype.mousedown = function (e) {                var iMouseX = Math.floor(e.pageX - this.GetAbsoluteLocationEx(this.canvas).absoluteLeft);                var iMouseY = Math.floor(e.pageY - this.GetAbsoluteLocationEx(this.canvas).absoluteTop);                this.px = iMouseX - this.x;                this.py = iMouseY - this.y;                if (this.bHow[0]) {                    this.px = iMouseX - this.x;                    this.py = iMouseY - this.y;                }                if (this.bHow[1]) {                    this.px = iMouseX - this.x - this.w;                    this.py = iMouseY - this.y;                }                if (this.bHow[2]) {                    this.px = iMouseX - this.x - this.w;                    this.py = iMouseY - this.y - this.h;                }                if (this.bHow[3]) {                    this.px = iMouseX - this.x;                    this.py = iMouseY - this.y - this.h;                }                if (iMouseX > this.x + this.csizeh && iMouseX < this.x + this.w - this.csizeh &&            iMouseY > this.y + this.csizeh && iMouseY < this.y + this.h - this.csizeh) {                    this.bDragAll = true;                }                for (i = 0; i < 4; i++) {                    if (this.bHow[i]) {                        this.bDrag[i] = true;                    }                }            }            //鼠标弹起事件            Selection.prototype.mouseup = function () {                this.bDragAll = false;                for (i = 0; i < 4; i++) {                    this.bDrag[i] = false;                }                this.px = 0;                this.py = 0;            }            //得到裁剪选区            Selection.prototype.getresult = function () {                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);                this.canvas.style.Width = this.w;                this.canvas.style.Height = this.h;                this.canvas.width = this.w;                this.canvas.height = this.h;                this.context.drawImage(this.image, this.x, this.y, this.w, this.h, 0, 0, this.w, this.h);                var temp_ctx, temp_canvas;                temp_canvas = document.createElement('canvas');                temp_ctx = temp_canvas.getContext('2d');                temp_canvas.width = this.w;                temp_canvas.height = this.h;                temp_ctx.drawImage(this.image, this.x, this.y, this.w, this.h, 0, 0, this.w, this.h);                var vData = temp_canvas.toDataURL();                this.image.src = vData;return vData;            }            //添加鼠标监听事件            Selection.prototype.addListerner = function () {                var temp = this;                this.canvas.onmousemove = function (e) {                    temp.mousemove(e);                }                this.canvas.onmousedown = function (e) {                    temp.mousedown(e);                }                this.canvas.onmouseup = function () {                    temp.mouseup();                }            }            //注销鼠标事件            Selection.prototype.disposeEvent = function () {                this.canvas.onmousemove = null;                this.canvas.onmousedown = null;                this.canvas.onmouseup = null;this.canvas.style.cursor = "default";            }

过几天再给大家一份改进版的图片裁剪，（亮点：可以裁剪透明圆头像哦~~~）

源码下载地址：

http://download.csdn.net/detail/cruzysoft/6477461