canvas实现图片裁剪功能

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 &