使用JavaScript+canvas实现图片裁剪

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

            selectObj.py = iMouseY – selectObj.y – selectObj.h;
        }
        if (selectObj.bHow[3]) {
            selectObj.px = iMouseX – selectObj.x;
            selectObj.py = iMouseY – selectObj.y – selectObj.h;
        }
        if (iMouseX > selectObj.x + selectObj.csizeh &&
            iMouseX < selectObj.x + selectObj.w – selectObj.csizeh &&
            iMouseY > selectObj.y + selectObj.csizeh &&
            iMouseY < selectObj.y + selectObj.h – selectObj.csizeh) {
            selectObj.bDragAll = true;
        }
        for (var i = 0; i < 4; i++) {
            if (selectObj.bHow[i]) {
                selectObj.bDrag[i] = true;
            }
        }
    };
    canvas.mouseout(canvasMouseOut);
    canvas.mouseup(canvasMouseUp);
    canvas.on(“touchend”, canvasMouseUp);
    this.getImageData = function (previewID) {
        var tmpCanvas = $(“<canvas></canvas>”)[0];
        var tmpCtx = tmpCanvas.getContext(“2d”);
        if (tmpCanvas && selectObj) {
            tmpCanvas.width = selectObj.w;
            tmpCanvas.height = selectObj.h;
            tmpCtx.drawImage(image, selectObj.x, selectObj.y, selectObj.w, selectObj.h, 0, 0, selectObj.w, selectObj.h);
            if (document.getElementById(previewID)) {
                document.getElementById(previewID).src = tmpCanvas.toDataURL();
                document.getElementById(previewID).style.border = “1px solid #ccc”;