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:

js, um das Zuschneiden und Skalieren von Avatarbildern und die Methode zum Hochladen von Bildern ohne Aktualisierung zu erreichen
Beispiel für einen Bildschneideeffekt mit Javascript
JavaScript-Bildschneideeffekt (Lupe)

<<: Detaillierte Erklärung der Grundfunktionen und Verwendung von MySQL-Fremdschlüsseln

>>: Schritte zum Erstellen einer Linux-Umgebung unter Windows mit VMWare (Bild und Text)