canvas做的图片裁切

/*
* for example
<div id="box" style="position: relative">
    <canvas width="500" height="200"></canvas>
    <div id="newImg"></div>
</div>
<script>
var cpimg = new corpImg();
cpimg.init({
    box: "box",
    imgurl: "http://img.ifeng.com/tres/auto/upload/images/2010/0330/095000/0_251173_d3560254d4e816866c41b2c1b1c88a70.jpg",
    newimgId : "newImg",
    callback: function(img) {

    }
})
</script>
*/
function corpImg() {}
corpImg.prototype = {
    constructor: corpImg,
    init : function (options) {
        if (typeof options != "object") return;
        this.box = document.getElementById(options.box);
        this.canvas = box.getElementsByTagName('canvas')[0];
        this.ctx = this.canvas.getContext('2d');
        this.img = new Image();
        this.wrap = null;

        var self = this;
        this.loadImg(options.imgurl, function() {
            self.ctx.drawImage(self.img, 0, 0);
        });

        this.canvas.addEventListener('mousedown', function(e){
            self.startCorp(e, self);
        }, false);
        this.canvas.addEventListener('mouseup', function(e) {
            self.stopCorp(e, self, function(xyArr) {
                var flag = self.ctx.getImageData(xyArr[0], xyArr[1], xyArr[2], xyArr[3]);

                var corpCanvas = document.createElement("canvas");
                self.box.appendChild(corpCanvas);
                var cpctx = corpCanvas.getContext('2d');
                corpCanvas.id = "corpCanvas";
                corpCanvas.style.position = "absolute";
                corpCanvas.width = xyArr[2];
                corpCanvas.height = xyArr[3];
                corpCanvas.style.left = xyArr[0]+"px";
                corpCanvas.style.top = xyArr[1]+"px";
                cpctx.putImageData(flag, 0, 0);
                flag = null;

                var ii = document.createElement('img');
                var newImg = document.getElementById(options.newimgId);
                ii.src = corpCanvas.toDataURL("image/png");
                newImg.innerHTML = "";
                newImg.appendChild(ii);
                options.callback(corpCanvas.toDataURL("image/png"));
            })
        }, false);

    },
    loadImg: function (src, callback) {
        this.img.src = src;
        this.img.onload = function() {
            callback();
        }
    },
    // 开始手动裁切
    startCorp: function(e, self) {
        self.ctx.clearRect(0,0, self.canvas.width, self.canvas.height);
        document.getElementById('corpCanvas') && self.box.removeChild(corpCanvas);
        self.ctx.drawImage(self.img, 0, 0);
        self.ctx.fillStyle = "rgba(0,0,0, .3)";
        self.ctx.fillRect(0,0, self.canvas.width, self.canvas.height);
        self.wrap = self.ctx.getImageData(0,0, self.canvas.width, self.canvas.height);
        self.dX = e.clientX - self.canvas.offsetLeft;
        self.dY = e.clientY - self.canvas.offsetTop;
        // console.log(self.dX+":"+self.dY);
        self.canvas.onmousemove = function(e) {
            self.corpIng(e, self);
        }
    },

    // 停止手动裁切
    stopCorp: function(e, self, callback) {
        self.wrap = null;
        self.uX = e.clientX - self.canvas.offsetLeft;
        self.uY = e.clientY - self.canvas.offsetTop;

        // console.log(self.uX+":"+self.uY+"::::::W="+(self.uX-self.dX)+":H="+(self.uY-self.dY));
        self.canvas.onmousemove = null;
        callback([(self.dX+1),(self.dY+1),Math.abs(self.uX-self.dX-2),Math.abs(self.uY-self.dY-2)]);
    },

    // 手动裁切中
    corpIng: function(e, self) {
        var x = e.clientX - self.canvas.offsetLeft;
        var y = e.clientY - self.canvas.offsetTop;

        self.ctx.putImageData(self.wrap,0,0);
        self.ctx.fillStyle = "rgba(56,20,60)";

        self.ctx.beginPath();
        self.ctx.moveTo(self.dX, self.dY);
        self.ctx.strokeRect(self.dX, self.dY,(x-self.dX),(y-self.dY));
        self.ctx.closePath();
        self.ctx.drawImage(self.img, self.dX, self.dY,(x-self.dX),(y-self.dY), self.dX,self.dY,(x-self.dX),(y-self.dY));
    }
}

没写兼容，细节也不完善，没时间先放着