JavaScript Canvas图片裁剪教程：实现拖拽与缩放

Canvas基础与图片裁剪概述

Canvas是一个允许开发者通过脚本进行图形绘制的HTML元素，它提供了一套完整的属性和方法接口。利用这些特性，不仅可以绘制基础图形和处理图像，还能实现简单的动画效果甚至游戏开发。
Canvas元素仅包含width和height两个属性，用于定义画布的宽度和高度。若未通过HTML标签属性或JavaScript代码显式设置，其默认尺寸将为300像素宽、150像素高。
关于Canvas的基础介绍暂告一段落，接下来我们将展示如何使用JavaScript配合Canvas实现图片裁剪的具体代码示例。
具体实现代码如下：
var selectObj = null;
图片裁剪核心逻辑实现function ImageCrop(canvasId, imageSource, x, y, width, height) {
var canvas = $("#" + canvasId);
if (canvas.length == 0 && imageSource) {
return;
    }
function canvasMouseDown(e) {
StopSelect(e);
canvas.css("cursor", "default");
    }
function canvasMouseMove(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);
canvas.css("cursor", "default");
if (selectObj.bDragAll) {
canvas.css("cursor", "move");
canvas.data("drag", true);
var cx = iMouseX - selectObj.px;
cx = cx < 0 ? 0 : cx;
mx = ctx.canvas.width - selectObj.w;
cx = cx > mx ? mx : cx;
selectObj.x = cx;
var cy = iMouseY - selectObj.py;
cy = cy < 0 ? 0 : cy;
my = ctx.canvas.height - selectObj.h;
cy = cy > my ? my : cy;
selectObj.y = cy;
        }
for (var i = 0; i < 4; i++) {
selectObj.bHow[i] = false;
selectObj.iCSize[i] = selectObj.csize;
        }
// hovering over resize cubes
if (iMouseX > selectObj.x - selectObj.csizeh && iMouseX < selectObj.x + selectObj.csizeh &&
iMouseY > selectObj.y - selectObj.csizeh && iMouseY < selectObj.y + selectObj.csizeh) {
canvas.css("cursor", "pointer");
selectObj.bHow[0] = true;
selectObj.iCSize[0] = selectObj.csizeh;
        }
if (iMouseX > selectObj.x + selectObj.w - selectObj.csizeh && iMouseX < selectObj.x + selectObj.w + selectObj.csizeh &&
iMouseY > selectObj.y - selectObj.csizeh && iMouseY < selectObj.y + selectObj.csizeh) {
canvas.css("cursor", "pointer");
selectObj.bHow[1] = true;
selectObj.iCSize[1] = selectObj.csizeh;
        }
if (iMouseX > selectObj.x + selectObj.w - selectObj.csizeh && iMouseX < selectObj.x + selectObj.w + selectObj.csizeh &&
iMouseY > selectObj.y + selectObj.h - selectObj.csizeh && iMouseY < selectObj.y + selectObj.h + selectObj.csizeh) {
canvas.css("cursor", "pointer");
selectObj.bHow[2] = true;
selectObj.iCSize[2] = selectObj.csizeh;
        }
if (iMouseX > selectObj.x - selectObj.csizeh && iMouseX < selectObj.x + selectObj.csizeh &&
iMouseY > selectObj.y + selectObj.h - selectObj.csizeh && iMouseY < selectObj.y + selectObj.h + selectObj.csizeh) {
canvas.css("cursor", "pointer");
selectObj.bHow[3] = true;
selectObj.iCSize[3] = selectObj.csizeh;
        }
if (iMouseX > selectObj.x && iMouseX < selectObj.x + selectObj.w && iMouseY > selectObj.y && iMouseY < selectObj.y + selectObj.h) {
canvas.css("cursor", "move");
        }
// in case of dragging of resize cubes
var iFW, iFH, iFX, iFY, mx, my;
if (selectObj.bDrag[0]) {
iFX = iMouseX - selectObj.px;
iFY = iMouseY - selectObj.py;
iFW = selectObj.w + selectObj.x - iFX;
iFH = selectObj.h + selectObj.y - iFY;
canvas.data("drag", true);
        }
if (selectObj.bDrag[1]) {
iFX = selectObj.x;
iFY = iMouseY - selectObj.py;
iFW = iMouseX - selectObj.px - iFX;
iFH = selectObj.h + selectObj.y - iFY;
canvas.data("drag", true);
        }
if (selectObj.bDrag[2]) {
iFX = selectObj.x;
iFY = selectObj.y;
iFW = iMouseX - selectObj.px - iFX;
iFH = iMouseY - selectObj.py - iFY;
canvas.data("drag", true);
        }
if (selectObj.bDrag[3]) {
iFX = iMouseX - selectObj.px;
iFY = selectObj.y;
iFW = selectObj.w + selectObj.x - iFX;
iFH = iMouseY - selectObj.py - iFY;
canvas.data("drag", true);
        }
if (iFW > selectObj.csizeh * 2 && iFH > selectObj.csizeh * 2) {
selectObj.w = iFW;
selectObj.h = iFH;
selectObj.x = iFX;
selectObj.y = iFY;
        }
drawScene();
    }
function canvasMouseOut() {
$(canvas).trigger("mouseup");
    }
function canvasMouseUp() {
selectObj.bDragAll = false;
for (var i = 0; i < 4; i++) {
selectObj.bDrag[i] = false;
        }
canvas.css("cursor", "default");
canvas.data("select", {
x: selectObj.x,
y: selectObj.y,
w: selectObj.w,
h: selectObj.h
        });
selectObj.px = 0;
selectObj.py = 0;
    }
选择区域类与绘图方法function Selection(x, y, w, h) {
this.x = x; // initial positions
this.y = y;
this.w = w; // and size
this.h = h;
this.px = x; // extra variables to dragging calculations
this.py = y;
this.csize = 4; // resize cubes size
this.csizeh = 6; // resize cubes size (on hover)
this.bHow = [false, false, false, false]; // hover statuses
this.iCSize = [this.csize, this.csize, this.csize, this.csize]; // resize cubes sizes
this.bDrag = [false, false, false, false]; // drag statuses
this.bDragAll = false; // drag whole selection
    }
Selection.prototype.draw = function () {
ctx.strokeStyle = '#666';
ctx.lineWidth = 2;
ctx.strokeRect(this.x, this.y, this.w, this.h);
// draw part of original image
if (this.w > 0 && this.h > 0) {
ctx.drawImage(image, this.x, this.y, this.w, this.h, this.x, this.y, this.w, this.h);
        }
// draw resize cubes
ctx.fillStyle = '#999';
ctx.fillRect(this.x - this.iCSize[0], this.y - this.iCSize[0], this.iCSize[0] * 2, this.iCSize[0] * 2);
ctx.fillRect(this.x + this.w - this.iCSize[1], this.y - this.iCSize[1], this.iCSize[1] * 2, this.iCSize[1] * 2);
ctx.fillRect(this.x + this.w - this.iCSize[2], this.y + this.h - this.iCSize[2], this.iCSize[2] * 2, this.iCSize[2] * 2);
ctx.fillRect(this.x - this.iCSize[3], this.y + this.h - this.iCSize[3], this.iCSize[3] * 2, this.iCSize[3] * 2);
    };
场景绘制与事件绑定var drawScene = function () {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // clear canvas
// draw source image
ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height);
// and make it darker
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// draw selection
selectObj.draw();
canvas.mousedown(canvasMouseDown);
canvas.on("touchstart", canvasMouseDown);
    };
var createSelection = function (x, y, width, height) {
var content = $("#imagePreview");
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;
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";
            }
return tmpCanvas.toDataURL();
        }
    };
}
图片自适应调整函数function autoResizeImage(maxWidth, maxHeight, objImg) {
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var ratio = 1;
var w = objImg.width;
var h = objImg.height;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (w < maxWidth && h < maxHeight) {
return;
    }
if (maxWidth == 0 && maxHeight == 0) {
ratio = 1;
} else if (maxWidth == 0) {
if (hRatio < 1) {
ratio = hRatio;
        }
} else if (maxHeight == 0) {
if (wRatio < 1) {
ratio = wRatio;
        }
} else if (wRatio < 1 || hRatio < 1) {
ratio = (wRatio <= hRatio ? wRatio : hRatio);
} else {
ratio = (wRatio <= hRatio ? wRatio : hRatio) - Math.floor(wRatio <= hRatio ? wRatio : hRatio);
    }
if (ratio < 1) {
if (ratio < 0.5 && w < maxWidth && h < maxHeight) {
ratio = 1 - ratio;
        }
w = w * ratio;
h = h * ratio;
    }
objImg.height = h;
objImg.width = w;
}
小伙伴们拿去试试吧，希望大家能够喜欢，有疑问就给我留言吧。
基于JavaScript与Canvas实现图片裁剪功能

Canvas基础与图片裁剪概述

实用工具推荐
