使用JavaScript+canvas实现图片裁剪
陈正业
本文向大家介绍使用JavaScript+canvas实现图片裁剪，包括了使用JavaScript+canvas实现图片裁剪的使用技巧和注意事项，需要的朋友参考一下
canvas是一个可以让我们使用脚本绘图的标签，它提供了一系列完整的属性和方法。我们可以借此来实现图形绘制，图像处理甚至实现简单的动画和游戏制作。
canvas标签只有两个属性：width和height，用来设定画布的宽和高，如果没有通过标签属性或者脚本来设置，默认为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;
}
小伙伴们拿去试试吧，希望大家能够喜欢，有疑问就给我留言吧。
类似资料：
-
本文向大家介绍Python基于tkinter canvas实现图片裁剪功能，包括了Python基于tkinter canvas实现图片裁剪功能的使用技巧和注意事项，需要的朋友参考一下 实现：tkinter 画布上显示图片，按下鼠标左键并且移动，实现截图 代码如下 原图one.png 运行 one_corp.png 源码（https://github.com/rainbow-tan/rainbow/
-
本文向大家介绍iOS实现裁剪框和图片剪裁功能，包括了iOS实现裁剪框和图片剪裁功能的使用技巧和注意事项，需要的朋友参考一下 图片处理中经常用的图片剪裁，就是通过剪裁框确定图片剪裁的区域，然后剪去该区域的图片，今天实现了一下，其实图片剪裁本身不难，主要剪裁框封装发了点时间，主要功能可以拖动四个角缩放，但不能超出父视图，拖动四个边单方向缩放，不能超出父视图，拖动中间部分单单移动，不改变大小，不能超出父
-
本文向大家介绍html5-canvas 使用画布裁剪图像，包括了html5-canvas 使用画布裁剪图像的使用技巧和注意事项，需要的朋友参考一下 示例 本示例显示了一个简单的图像裁剪功能，该功能获取图像和裁剪坐标并返回裁剪后的图像。 使用
-
本文向大家介绍使用js实现一个图片剪裁的功能相关面试题，主要包含被问及使用js实现一个图片剪裁的功能时的应答技巧和注意事项，需要的朋友参考一下
-
本文向大家介绍php结合imgareaselect实现图片裁剪，包括了php结合imgareaselect实现图片裁剪的使用技巧和注意事项，需要的朋友参考一下 引用CSS 引用js html jQuery代码 确定裁剪 服务器端php代码 以上所述就是本文的全部内容了，希望大家能够喜欢。
-
本文向大家介绍vue实现图片裁剪后上传，包括了vue实现图片裁剪后上传的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了vue实现图片裁剪后上传的具体代码，供大家参考，具体内容如下 一、背景 目前负责的系统（商城后台管理系统）里面有这么一个需求，为了配合前台的展示，上传的商品图片比较必须是1:1的正方形。（其它地方有时会有5:4或者16:9的需求，但较少）。所以需要对上传的图片先进行裁