js realisiert die Bildschneidefunktion
|
In diesem Artikelbeispiel wird der spezifische Code von js zum Bildschneiden als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt
Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<Stil>
.Würfel{
Höhe: 0;
Breite: 0;
Position: absolut;
links: 0;
oben: 0;
Box-Größe: Rahmenbox;
Hintergrundfarbe: Hellseegrün;
Deckkraft: .3;
Z-Index: 99; Zeigerereignisse: keine;
}
#groß{
Rand: 1px tief schwarz;
Höhe: 500px;
Breite: 500px;
Position: relativ;
Hintergrundbild: url("img/pixel.png");
Zeilenhöhe: 500px;
Überlauf: versteckt;
vertikale Ausrichtung: Mitte;
Textausrichtung: zentriert;
schweben: links;
}
#big>img{Zeilenhöhe: 500px; vertikale Ausrichtung: Mitte;
maximale Höhe: 100 %;
maximale Breite: 100 %;
Zeigerereignisse: keine;
}
.cv{
Position: relativ;
Float: links; Rahmen: 2px, durchgehendes helles Seegrün;
}
</Stil>
<Skript>
lass count=0; lass c,b,d,p1,p2,cv,cx,img,p;
fenster.onload = Funktion () {
c=document.querySelectorAll(".cube");
b=document.getElementById("groß");
cv=document.getElementById("c");
cx = cv.getContext('2d');
img = neues Bild();
d=b.querySelector("img");
img.src=d.src;
img.onload=Funktion(){
cx.drawImage(img, 0,0,500,500,0,0,500,500);
p=Bild.Breite/b.querySelector("Bild").Breite;
konsole.log(img);
}
p1={
x:0,
und: 0
};
p2={
x:0,
und: 0
};
b.addEventListener("klicken",Funktion (e){
zählen++;
wenn(Anzahl===1){
p1.x=e.OffsetX;
p1.y=e.offsetY;
p2.x=e.offsetX;
p2.y=e.offsetY;
f2();
f4();
}
wenn(Anzahl===2){
p2.x=e.offsetX;
p2.y=e.offsetY;
meinDraw();
}
});
Funktion f1(){
c[0].style.height=p2.y+"px";
c[1].style.height=p2.y+"px";
c[2].style.height=p2.y+"px";
c[3].style.top=p2.y+"px";
c[4].style.top=p2.y+"px";
c[3].style.height=(p1.y-p2.y)+"px";
c[4].style.height=(p1.y-p2.y)+"px";
c[5].style.top=p1.y+"px";
c[6].style.top=p1.y+"px";
c[5].style.height=(b.offsetHeight-p1.y)+"px";
c[6].style.height=b.offsetHeight-p1.y+"px";
c[7].style.top=p1.y+"px";
c[7].style.height=(b.offsetHeight-p1.y)+"px";
}
Funktion f2(){
c[0].style.height=p1.y+"px";
c[1].style.height=p1.y+"px";
c[2].style.height=p1.y+"px";
c[3].style.top=p1.y+"px";
c[4].style.top=p1.y+"px";
c[3].style.height=(p2.y-p1.y)+"px";
c[4].style.height=(p2.y-p1.y)+"px";
c[5].style.top=p2.y+"px";
c[6].style.top=p2.y+"px";
c[5].style.height=(b.offsetHeight-p2.y)+"px";
c[6].style.height=b.offsetHeight-p2.y+"px";
c[7].style.top=p2.y+"px";
c[7].style.height=(b.offsetHeight-p2.y)+"px";
}
Funktion f3(){
c[0].style.width=p2.x+"px";
c[1].style.left=p2.x+"px";
c[1].style.width=(p1.x-p2.x)+"px";
c[2].style.left=p1.x+"px";
c[2].style.width=(b.offsetWidth-p1.x)+"px";
c[3].style.width=p2.x+"px";
c[4].style.left=p1.x+"px";
c[4].style.width=(b.offsetWidth-p2.x)+"px";
c[5].style.width=p2.x+"px";
c[6].style.left=p2.x+"px";
c[6].style.width=(p1.x-p2.x)+"px";
c[7].style.left=p1.x+"px";
c[7].style.width=(b.offsetWidth-p1.x)+"px";
}
Funktion f4(){
c[0].stil.width=p1.x+"px";
c[1].style.left=p1.x+"px";
c[1].style.width=(p2.x-p1.x)+"px";
c[2].style.left=p2.x+"px";
c[2].style.width=(b.offsetWidth-p2.x)+"px";
c[3].style.width=p1.x+"px";
c[4].style.left=p2.x+"px";
c[4].style.width=(b.offsetWidth-p2.x)+"px";
c[5].style.width=p1.x+"px";
c[6].style.left=p1.x+"px";
c[6].style.width=(p2.x-p1.x)+"px";
c[7].style.left=p2.x+"px";
c[7].style.width=(b.offsetWidth-p2.x)+"px";
}
b.addEventListener("Mausbewegung",Funktion (e){
wenn(Anzahl===1){
p2.x=e.offsetX;
p2.y=e.offsetY;
wenn(p2.y<p1.y){
f1();
}anders{
f2();
}
wenn(p2.x<p1.x){
f3();
}anders{
f4();
}
}
})
}
Funktion myDraw(){
cx.clearRect(0,0,500,500);
sei w=p1.x-p2.x;
wenn(w<0){
b=-b;
}
w*=p;
sei h=p1.y-p2.y;
wenn(h<0){
h=-h;
}
h*=p;
wenn(p1.x<p2.x){
p1.x=(p1.xb.querySelector("img").offsetLeft)*p;
}anders{
p1.x=(p2.xb.querySelector("img").offsetLeft)*p;
}
wenn(p1.y<p2.y){
p1.y=(p1.yb.querySelector("img").offsetTop)*p;
}anders{
p1.y=(p2.yb.querySelector("img").offsetTop)*p;
}
cx.drawImage(img,
p1.x,p1.y,
b, h, 0,0,500,500);
p1.x=0;
p1.y=0;
p2.x=0;
p2.y=0;
}
</Skript>
</Kopf>
<Text>
<div
id="groß">
<!-- 8 Div-Abdeckungen-->
<div Klasse="Würfel"></div>
<div Klasse="Würfel"></div>
<div Klasse="Würfel"></div>
<div Klasse="Würfel"></div>
<div Klasse="Würfel"></div>
<div Klasse="Würfel"></div>
<div Klasse="Würfel"></div>
<div Klasse="Würfel"></div>
<img src="img/katy2.jpg" alt=""/>
</div>
<div Klasse="Lebenslauf">
<canvas id="c" Höhe="500" Breite="500">
</Leinwand>
</div>
</body>
</html>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Detaillierte Erklärung der Grundfunktionen und Verwendung von MySQL-Fremdschlüsseln
>>: Schritte zum Erstellen einer Linux-Umgebung unter Windows mit VMWare (Bild und Text)
Artikel empfehlen
Detaillierte Erklärung des wunderbaren CSS-Attributs MASK
Dieser Artikel stellt eine sehr interessante Attr...
Der Dienst für die dekomprimierte Version von MySQL 5.6 kann aufgrund des Systemfehlers 1067 nicht gestartet werden
Notieren Sie den Fehler, der mich heute den ganze...
Detaillierte Erläuterung zum Hinzufügen von Sicherheitsgruppenregeln zum Alibaba Cloud Server (grafisches Tutorial)
Überblick über die Alibaba Cloud Security Group F...
Detaillierte Schritte zur Installation von MySQL mit Cluster-RPM
MySQL-Datenbank installieren a) Laden Sie das MyS...
HTML-Maus-CSS-Steuerung
Im Allgemeinen wird die Maus als nach oben gericht...
Installations- und Nutzungsanalyse von Portainer, einem visuellen UI-Verwaltungstool für Docker
Portainer ist ein hervorragendes grafisches Verwa...
So visualisieren Sie skizzierte Diagramme in Vue.js mit RoughViz
einführen Ein Diagramm ist eine grafische Darstel...
So installieren und konfigurieren Sie den SSH-Dienst in Ubuntu 18.04
Installieren Sie das SSH-Tool 1. Öffnen Sie das T...
JavaScript Canvas Tetris-Spiel
Tetris ist ein sehr klassisches kleines Spiel, un...
So verwenden Sie Docker+DevPi zum Erstellen einer lokalen PyPi-Quelle
Vor einiger Zeit musste ich für die Entwicklung h...
Docker CP kopiert Dateien und gibt den Container ein
Geben Sie den laufenden Container ein # Geben Sie...
Windows 10 und MySQL 5.5 installieren und verwenden ohne Installation ausführliches Tutorial (Bild und Text)
Dieser Artikel stellt die Installation und Verwen...
Detaillierte Erläuterung des Zahlungsfunktionscodes des Vue-Projekts
1. Alipay-Methode: Alipay-Methode: Klicken Sie zu...
HTML+CSS zum Erzielen von Spezialeffekten durch Textfaltung – Beispiel
In diesem Artikel werden hauptsächlich Beispiele ...
Detaillierte Erklärung der MySQL-Dreiwertelogik und NULL
Inhaltsverzeichnis Was ist NULL Zwei Arten von NU...