JavaScript Canvas realisiert den Effekt des Neun-Quadrat-Rasterschneidens

In diesem Artikel wird der spezifische Code der Leinwand zur Erzielung des Neun-Raster-Schnitteffekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Anzeige der ersten Seite

Direkt auf dem Code

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Dokument</title>
    <Stil>
        Körper {
            Textausrichtung: zentriert;
        }
        
        Leinwand {
            Rand: 1px durchgezogen;
        }
        
        .neuesCanvas {
            Breite: 316px;
            Höhe: 316px;
            Rand: automatisch;
        }
        
        .neuesFoto,
        .herunterladen {
            Breite: 300px;
            Höhe: 40px;
            Zeilenhöhe: 40px;
            Rand: automatisch;
            Hintergrundfarbe: Kornblumenblau;
            Rahmenradius: 5px;
            Cursor: Zeiger;
            Rand: 10px automatisch;
            Farbe: weiß;
        }
    </Stil>
</Kopf>

<Text>
    <h3>Verwenden Sie Leinwand, um den Effekt eines Neunerrasterschnitts zu erzielen</h3>
    <div Klasse="meineLeinwand">
        <canvas Breite="300" Höhe="300" ID="mycnavas"></canvas>
    </div>
    <div Klasse="newpohoto">
        Beginnen Sie mit dem Ausschneiden von Bildern</div>
    <div Klasse="neueLeinwand">
        <canvas Breite="100" Höhe="100" id="img1"></canvas>
        <canvas Breite="100" Höhe="100" id="img2"></canvas>
        <canvas Breite="100" Höhe="100" id="img3"></canvas>
        <canvas Breite="100" Höhe="100" id="img4"></canvas>
        <canvas Breite="100" Höhe="100" id="img5"></canvas>
        <canvas Breite="100" Höhe="100" id="img6"></canvas>
        <canvas Breite="100" Höhe="100" id="img7"></canvas>
        <canvas Breite="100" Höhe="100" id="img8"></canvas>
        <canvas Breite="100" Höhe="100" id="img9"></canvas>
    </div>
    <div Klasse="Herunterladen">
        Bild herunterladen</div>
    <Skript>
         var canvas = document.getElementById("mycnavas"); //Jetzt das Bild darauf platzieren var cxt = mycnavas.getContext("2d");
        var img = neues Bild();
        img.src = "../img/img10.jpg";
        fenster.onload = funktion() {
            cxt.drawImage(img, 0, 0, 400, 300); //Bildposition zeichnen} 
        var arr = []; //Speichere das ausgeschnittene Bild im Array document.getElementsByClassName("newpohoto")[0].onclick = function() {
            var q = 1;
            für (var i = 0; i < 3; i++) {     
                für (var j = 0; j < 3; j++) {
                    var data = cxt.getImageData(j * 100, i * 100, 400, 100); //Ähnlich der Funktion „Kopieren“ var img = document.getElementById("img" + q)
                    var newcxt = img.getContext("2d");
                    newcxt.putImageData(data, 0, 0); //Ähnlich der Funktion „Einfügen“ arr.push(console.log(img.toDataURL(q + „.png“))) //Zwei Parameter der Methode toDataURL(): DataURL(Typ, EncoderOptions) Der Typ gibt das Format des Bildes nach der Konvertierung in die Base64-Kodierung an, z. B.: image/png, image/jpeg, image/webp usw. Das Standardformat ist image/png.                                     
                    q++;
                    console.log(arr)
                }
            }

        }
         //Das ausgeschnittene Bild herunterladen var arr = [];
        document.getElementsByClassName('herunterladen')[0].onclick = function() {
            für (var i = 0; i < 9; i++) {
                var a = document.createElement('a');
                a.download = "img" + (i + 1);
                a.href = arr[i];
                Dokument.Body.AnhängenKind(a);
                ein.Klick();
            }
        }
    </Skript>

</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: