使用JavaScript+canvas实现图片裁剪

2020-05-17 06:27:24易采站长站整理

        x = x || Math.ceil((content.width() – width) / 2);
        y = y || Math.ceil((content.height() – height) / 2);
        return new Selection(x, y, width, height);
    };
    var ctx = canvas[0].getContext(“2d”);
    var iMouseX = 1;
    var iMouseY = 1;
    var image = new Image();
    image.onload = function () {
        selectObj = createSelection(x, y, width, height);
        canvas.data(“select”, {
            x: selectObj.x,
            y: selectObj.y,
            w: selectObj.w,
            h: selectObj.h
        });
        drawScene();
    };
    image.src = imageSource;
    canvas.mousemove(canvasMouseMove);
    canvas.on(“touchmove”, canvasMouseMove);
    var StopSelect = function (e) {
        var canvasOffset = $(canvas).offset();
        var pageX = e.pageX || event.targetTouches[0].pageX;
        var pageY = e.pageY || event.targetTouches[0].pageY;
        iMouseX = Math.floor(pageX – canvasOffset.left);
        iMouseY = Math.floor(pageY – canvasOffset.top);
        selectObj.px = iMouseX – selectObj.x;
        selectObj.py = iMouseY – selectObj.y;
        if (selectObj.bHow[0]) {
            selectObj.px = iMouseX – selectObj.x;
            selectObj.py = iMouseY – selectObj.y;
        }
        if (selectObj.bHow[1]) {
            selectObj.px = iMouseX – selectObj.x – selectObj.w;
            selectObj.py = iMouseY – selectObj.y;
        }
        if (selectObj.bHow[2]) {
            selectObj.px = iMouseX – selectObj.x – selectObj.w;