Cet article présente principalement la méthode d'utilisation de JavaScript+canvas pour réaliser le recadrage d'images. Les amis qui en ont besoin peuvent s'y référer
Canvas est une balise qui nous permet d'utiliser le dessin de script. de Propriétés et de méthodes. Nous pouvons l’utiliser pour réaliser du dessin graphique, du traitement d’images et même de simples animations et productions de jeux.
La balise canvas n'a que deux attributs : la largeur et la hauteur, qui sont utilisés pour définir la largeur et la hauteur du canevas. Si elle n'est pas définie via les attributs de balise ou les scripts, la valeur par défaut est 300*150 ;
.
D'accord, l'introduction à Canvas est ici en premier. Jetons un coup d'œil au code pour recadrer des images à l'aide de javascript combiné avec 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;
}Copier après la connexion
Ce qui précède est l'intégralité du contenu de cet article. j'espère que cela sera utile à l'apprentissage de tout le monde. Plus Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !
Recommandations associées :
Remplissage progressif et transparence du canevas HTML5 pour obtenir un effet de masque d'image
Comment utiliser le canevas pour obtenir mosaïque d'images
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
