Image cropping using JavaScript canvas_jquery
May 16, 2016 pm 04:16 PMCanvas is a tag that allows us to draw using scripts. It provides a complete series of properties and methods. We can use this to achieve graphics drawing, image processing and even simple animation and game production.
The canvas tag has only two attributes: width and height, which are used to set the width and height of the canvas. If not set through tag attributes or scripts, the default is 300*150;
Okay, the introduction to canvas is here first. Let’s take a look at the code for cropping images using javascript combined with 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;
}
小伙伴们拿去试试吧,希望大家能够喜欢,有疑问就给我留言吧。

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to implement an online speech recognition system using WebSocket and JavaScript

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems

Simple JavaScript Tutorial: How to Get HTTP Status Code

JavaScript and WebSocket: Building an efficient real-time weather forecasting system

The development trend and future prospects of Canvas in China's education sector

How to get HTTP status code in JavaScript the easy way

Learn the canvas framework and explain the commonly used canvas framework in detail

Explore the powerful role and application of canvas in game development
