Canvas ist ein Tag, der es uns ermöglicht, mithilfe von Skripten zu zeichnen. Es bietet eine vollständige Reihe von Eigenschaften und Methoden. Damit können wir Grafikzeichnungen, Bildverarbeitung und sogar einfache Animationen und Spiele produzieren.
Das Canvas-Tag hat nur zwei Attribute: Breite und Höhe, die zum Festlegen der Breite und Höhe der Leinwand verwendet werden. Wenn sie nicht über Tag-Attribute oder Skripte festgelegt werden, ist der Standardwert 300*150;
Okay, hier ist zunächst die Einführung in Canvas. Schauen wir uns den Code zum Zuschneiden von Bildern mit Javascript in Kombination mit Canvas an:
var selectObj = null;
Funktion ImageCrop(canvasId, imageSource, x, y, width, height) {
var Canvas = $("#" CanvasId);
if (canvas.length == 0 && imageSource) {
zurück;
}
Funktion canvasMouseDown(e) {
StopSelect(e);
canvas.css("cursor", "default");
}
Funktion 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 > Mein ? mein: cy;
selectObj.y = cy;
}
für (var i = 0; i < 4; i ) {
selectObj.bHow[i] = false;
selectObj.iCSize[i] = selectObj.csize;
}
// Bewegen Sie den Mauszeiger über Würfel zur Größenänderung
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");
}
// beim Ziehen von Größenänderungswürfeln
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();
}
Funktion canvasMouseOut() {
$(canvas).trigger("mouseup");
}
Funktion canvasMouseUp() {
selectObj.bDragAll = false;
für (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;
}
Funktion Selection(x, y, w, h) {
this.x = x; // Anfangspositionen
this.y = y;
this.w = w; // und Größe
this.h = h;
this.px = x; // zusätzliche Variablen zum Ziehen von Berechnungen
this.py = y;
this.csize = 4; // Würfelgröße ändern
this.csizeh = 6; // Würfelgröße ändern (beim Schweben)
this.bHow = [falsch, falsch, falsch, falsch]; // Hover-Status
this.iCSize = [this.csize, this.csize, this.csize, this.csize]; // Größe der Würfel ändern
this.bDrag = [false, false, false, false]; // Status ziehen
this.bDragAll = false; // Ganze Auswahl ziehen
}
Selection.prototype.draw = function () {
ctx.StrokeStyle = '#666';
ctx.lineWidth = 2;
ctx.StrokeRect(this.x, this.y, this.w, this.h);
// Teil des Originalbildes zeichnen
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);
}
// Würfel mit Größenänderung zeichnen
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); // klare Leinwand
// Quellbild zeichnen
ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height);
// und dunkler machen
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// Auswahl zeichnen
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);
neue Auswahl(x, y, Breite, Höhe) zurückgeben;
};
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 = Funktion (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;
}
für (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 = $("")[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();
>
};
>
fonction autoResizeImage (maxWidth, maxHeight, objImg) {
var img = nouvelle image();
img.src = objImg.src;
var hRatio;
var wRatio;
rapport var = 1;
var w = objImg.width;
var h = objImg.hauteur;
wRatio = maxWidth / w;
hRatio = hauteurmax / h;
if (w < maxWidth && h < maxHeight) {
revenir ;
>
if (maxWidth == 0 && maxHeight == 0) {
rapport = 1;
} sinon if (maxWidth == 0) {
si (hRatio < 1) {
ratio = hRatio;
>
} sinon if (maxHeight == 0) {
si (wRatio < 1) {
rapport = wRatio;
>
} sinon si (wRatio < 1 || hRatio < 1) {
ratio = (wRatio <= hRatio ? wRatio : hRatio);
} autre {
ratio = (wRatio <= hRatio ? wRatio : hRatio) - Math.floor(wRatio <= hRatio ? wRatio : hRatio);
>
si (rapport < 1) {
if (rapport < 0,5 && w < maxWidth && h < maxHeight) {
rapport = 1 - rapport;
>
w = w * rapport ;
h = h * rapport ;
>
objImg.hauteur = h;
objImg.width = w;
>
小伙伴们拿去试试吧，希望大家能够喜欢，有疑问就给我留言吧。
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
