Beispiel für die Mosaikierung eines Bildes mit js

Beispiel für die Mosaikierung eines Bildes mit js

Dieser Artikel stellt hauptsächlich ein Beispiel für die Mosaikerstellung mit js vor und teilt es wie folgt mit Ihnen:

Effektdemonstration

Bildbeschreibung hier einfügen

Einführung in Canvas

Dieses HTML-Element ist für clientseitige Vektorgrafiken konzipiert. Es weist kein eigenes Verhalten auf, stellt aber eine Zeichen-API für clientseitiges JavaScript bereit, sodass das Skript beliebige Elemente auf eine Leinwand zeichnen kann.

HTML5-Tags werden zum Zeichnen von Bildern verwendet (über Skripte, normalerweise JavaScript).

Das Element selbst verfügt jedoch über keine Zeichenfunktionen (es ist lediglich ein Container für Grafiken) – zum eigentlichen Zeichnen müssen Sie Skripte verwenden.

Die Methode getContext() gibt ein Objekt zurück, das Methoden und Eigenschaften zum Zeichnen auf der Leinwand bereitstellt.

Dieses Handbuch bietet einen vollständigen Satz von getContext("2d")-Objekteigenschaften und -Methoden, die zum Zeichnen von Text, Linien, Rechtecken, Kreisen usw. auf der Leinwand verwendet werden können.

Unterschiede zwischen Markup und SVG und VML:

Ein wichtiger Unterschied zwischen dem Markup und SVG und VML besteht darin, dass es eine JavaScript-basierte Zeichen-API gibt, während SVG und VML ein XML-Dokument zur Beschreibung der Zeichnung verwenden.

Diese beiden Ansätze sind funktional gleichwertig und können jeweils durch den anderen simuliert werden. Oberflächlich betrachtet sind sie sehr unterschiedlich, doch jeder hat Stärken und Schwächen. Beispielsweise können SVG-Zeichnungen problemlos bearbeitet werden, indem einfach Elemente aus ihrer Beschreibung entfernt werden.

Um ein Element aus einer Markierung in derselben Abbildung zu entfernen, müssen Sie die Zeichnung häufig löschen und neu zeichnen.

Bildbeschreibung hier einfügen

Knowledge Point-Einführung

Erstellen von Bildern mit js

let img = neues Bild()
//Sie können dem Bild einen Link geben img.src = 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=826495019,1749283937&fm=26&gp=0.jpg'
//Oder der Pfad eines vorhandenen lokalen Bildes//img.src = './download.jpg'

//Zu HTML hinzufügen document.body.appendChild(img)

canvas.getContext("2d")

Grammatik:
Der Parameter contextID gibt den Zeichnungstyp an, den Sie auf der Leinwand erstellen möchten. Derzeit ist der einzige gültige Wert „2d“, der eine zweidimensionale Zeichnung angibt und bewirkt, dass diese Methode ein Umgebungsobjekt zurückgibt, das eine API für zweidimensionale Zeichnungen exportiert.

let ctx = Canvas.getContext(Kontext-ID)

ctx.drawImage()

JavaScript-Syntax 1:
Positionieren Sie das Bild auf der Leinwand:

Kontext.drawImage(img,x,y);

JavaScript-Syntax 2:
Positionieren Sie das Bild auf der Leinwand und geben Sie seine Breite und Höhe an:

Kontext.drawImage(Bild, x, y, Breite, Höhe);

JavaScript-Syntax 3:
Schneiden Sie das Bild zu und positionieren Sie den zugeschnittenen Teil auf der Leinwand:

JavaScript-Syntax
Die Methode getImageData() gibt ein ImageData-Objekt zurück, das die Pixeldaten des angegebenen Rechtecks ​​der Leinwand kopiert.
Für jedes Pixel in einem ImageData-Objekt gibt es vier Informationen, nämlich RGBA-Werte:
R - Rot (0-255)
G - Grün (0-255)
B - Blau (0-255)
A - Alphakanal (0-255; 0 ist transparent, 255 ist vollständig sichtbar)
Farbe/Alpha liegt in Array-Form vor und wird in der Dateneigenschaft des ImageData-Objekts gespeichert.

var imgData = context.getImageData(x,y,Breite,Höhe);

ctx.putImageData()

Die Methode putImageData() fügt die Bilddaten (vom angegebenen ImageData-Objekt) zurück auf die Leinwand ein.

Folgen Sie mir als Nächstes Schritt für Schritt, um diese kleine Funktion abzuschließen ~

Bildbeschreibung hier einfügen

Schritt für Schritt

Bereiten Sie unser Bild vor und fügen Sie unsere Methode hinzu

<Text>
    <img src="./download.jpg">
    <button onclick="addCanvas()">Canvas generieren</button>
    <button onclick="generateImg()">Bild generieren</button>
</body>

Bildbeschreibung hier einfügen

Als nächstes schreiben Sie addCanvas

Funktion addCanvas() {
		let bt = document.querySelector('Schaltfläche')

        let img = new Image(); //1. Bereiten Sie das Kopieren eines Bildes vor img.src = './download.jpg'; 
        img.onload = function() { //2. Warten Sie, bis das Bild geladen ist. let width = this.width
            lass Höhe = diese.Höhe
			
			let canvas = document.createElement('canvas') //3. Erstelle eine Leinwand let ctx = canvas.getContext("2d"); //4. Hole den Inhalt der Leinwand canvas.setAttribute('width', width) //5. Stelle der Einheitlichkeit halber die Breite und Höhe der Leinwand auf die Breite und Höhe des Bildes ein canvas.setAttribute('height', height)
   
            ctx.drawImage(this, 0, 0, width, height); //5. Zeichne das Bild auf die Leinwand document.body.insertBefore(canvas, bt) //5. Füge die Leinwand vor der Schaltfläche ein}
    }

So bringen Sie das Bild erfolgreich auf die Leinwand:

Bildbeschreibung hier einfügen

Nun, wir haben erfolgreich einen kleinen Schritt in Richtung Erfolg gemacht. Was sollten wir als nächstes tun? …Also, wir müssen die nativen Ereignisse onmouseup und onmousedown verwenden, um den Vorgang des Drückens der Maustaste darzustellen. Wo also fügen wir diese beiden Ereignisse hinzu?

Das ist richtig, da wir Mosaikoperationen auf der Leinwand durchführen möchten, müssen wir diese beiden Ereignisse zum Canvas-Element hinzufügen

Da der Prozess der Canvas-Erstellung etwas kompliziert ist, nehmen wir eine Modulkapselung vor!

Funktion addCanvas() {
        let bt = document.querySelector('Schaltfläche')

        let img = neues Bild();
        img.src = './download.jpg'; //Fügen Sie hier Ihr eigenes Bild ein img.onload = function() {
            let width = diese.breite
            lass Höhe = diese.Höhe

            lassen {
                Leinwand,
                ctx
            } = createCanvasAndCtx(width, height) //Objektdekonstruktion erhält Canvas und Ctx

            ctx.drawImage(dieses, 0, 0, Breite, Höhe);

            Dokument.Body.InsertBefore(Leinwand, bt)

        }
    }

    Funktion createCanvasAndCtx(Breite, Höhe) {
        let canvas = document.createElement('canvas')
        canvas.setAttribute('Breite', Breite)
        canvas.setAttribute('Höhe', Höhe)
        canvas.setAttribute('onmouseout', 'end()') //Behebung, dass die Maus die Leinwand nicht verlässt canvas.setAttribute('onmousedown', 'start()') //Maustaste nach unten hinzufügen canvas.setAttribute('onmouseup', 'end()') //Maustaste nach oben hinzufügen let ctx = canvas.getContext("2d");
        zurückkehren {
            Leinwand,
            ctx
        }
    }

	Funktion start() {
            let canvas = document.querySelector('canvas')
            canvas.onmousemove = () => {
                console.log('Sie haben die Maus gedrückt und bewegt')
            }
        }

        Funktion Ende() {
            let canvas = document.querySelector('canvas')
            canvas.onmousemove = null
        }

Testen Sie, ob unsere start() und end() wirksam sind

Bildbeschreibung hier einfügen

Nun, an diesem Punkt funktioniert unser Code noch wie gewünscht.

Die nächste Herausforderung ist schwieriger. Wir müssen Pixel abrufen und verarbeiten. Schreiben wir die Funktion start() noch einmal um.

Funktion start() {
    let img = document.querySelector('img')
    let canvas = document.querySelector('canvas')
    Lassen Sie ctx = canvas.getContext("2d");
    imgData = ctx.getImageData(0, 0, img.clientWidth, img.clientHeight);
    canvas.onmousemove = (e) => {
        let w = imgData.width; //1. Bildbreite und -höhe abrufen let h = imgData.height;

        //Der Mosaikgrad. Je größer die Zahl, desto unschärfer. let num = 10;

        //Holen Sie sich das Pixel RGBA, wo sich die Maus gerade befindet
        let color = getXY(imgData, e.offsetX, e.offsetY);

        für (sei k = 0; k < num; k++) {
            für (lass l = 0; l < num; l++) {
                //Setze die Farbe von imgData mit den Koordinaten (e.offsetX + l, e.offsetY + k)setXY(imgData, e.offsetX + l, e.offsetY + k, color);
            }
        }
        //Canvas-Daten aktualisieren ctx.putImageData(imgData, 0, 0);
    }
}

//Hier sind zwei Funktionen, setXY und getXY. Wenn Sie interessiert sind, können Sie das Prinzip des Abrufens studieren. function setXY(obj, x, y, color) {
    var w = Objektbreite;
    var h = obj.höhe;
    var d = obj.daten;
    obj.data[4 * (y * w + x)] = Farbe[0];
    obj.data[4 * (y * w + x) + 1] = Farbe[1];
    obj.data[4 * (y * w + x) + 2] = Farbe[2];
    obj.data[4 * (y * w + x) + 3] = Farbe[3];
}

Funktion getXY(Objekt, x, y) {
    var w = Objektbreite;
    var h = obj.höhe;
    var d = obj.daten;
    var Farbe = [];
    Farbe[0] = Objekt.Daten[4 * (y * w + x)];
    Farbe[1] = Objekt.Daten[4 * (y * w + x) + 1];
    Farbe[2] = Objekt.Daten[4 * (y * w + x) + 2];
    Farbe[3] = Objekt.Daten[4 * (y * w + x) + 3];
    Farbe zurückgeben;
}

Nun, wir sind nicht weit vom Erfolg entfernt. Der letzte Schritt besteht darin, das Bild zu generieren.

Glücklicherweise bietet uns canavs eine direkte Methode, um die Leinwand direkt als Base64-codiertes Bild zu exportieren:

Funktion generateImg() {
    let canvas = document.querySelector('canvas')
    var newImg = neues Bild();
    newImg.src = canvas.toDataURL("bild/png");
    document.body.insertBefore(neuesBild, Leinwand)
}

Endergebnis:

Bildbeschreibung hier einfügen

Ist das nicht ganz einfach? Schauen wir mal, ob Ihr handgeschriebener Code mit dem folgenden übereinstimmt:

Vollständiger Code

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

<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
</Kopf>

<Text>

    <Text>
        <img src="./download.jpg">
        <button onclick="addCanvas()">Canvas generieren</button>
        <button onclick="generateImg()">Bild generieren</button>
    </body>
    <Skript>
        Funktion addCanvas() {
            let bt = document.querySelector('Schaltfläche')

            let img = neues Bild();
            img.src = './download.jpg'; //Fügen Sie hier Ihr eigenes Bild ein img.onload = function() {
                let width = diese.breite
                lass Höhe = diese.Höhe

                lassen {
                    Leinwand,
                    ctx
                } = createCanvasAndCtx(Breite, Höhe)

                ctx.drawImage(dieses, 0, 0, Breite, Höhe);

                Dokument.Body.InsertBefore(Leinwand, bt)

            }
        }

        Funktion createCanvasAndCtx(Breite, Höhe) {
            let canvas = document.createElement('canvas')
            canvas.setAttribute('Breite', Breite)
            canvas.setAttribute('Höhe', Höhe)
            canvas.setAttribute('onmouseout', 'end()')
            canvas.setAttribute('beimHerunterlassen', 'start()')
            canvas.setAttribute('onmouseup', 'end()')
            Lassen Sie ctx = canvas.getContext("2d");
            zurückkehren {
                Leinwand,
                ctx
            }
        }

        Funktion start() {
            let img = document.querySelector('img')
            let canvas = document.querySelector('canvas')
            Lassen Sie ctx = canvas.getContext("2d");
            imgData = ctx.getImageData(0, 0, img.clientWidth, img.clientHeight);
            canvas.onmousemove = (e) => {
                let w = imgData.width; //1. Bildbreite und -höhe abrufen let h = imgData.height;

                //Der Mosaikgrad. Je größer die Zahl, desto unschärfer. let num = 10;

                //Holen Sie sich das Pixel RGBA, wo sich die Maus gerade befindet
                let color = getXY(imgData, e.offsetX, e.offsetY);

                für (sei k = 0; k < num; k++) {
                    für (lass l = 0; l < num; l++) {
                        //Setze die Farbe von imgData mit den Koordinaten (e.offsetX + l, e.offsetY + k)setXY(imgData, e.offsetX + l, e.offsetY + k, color);
                    }
                }
                //Canvas-Daten aktualisieren ctx.putImageData(imgData, 0, 0);
            }
        }

        Funktion generateImg() {
            let canvas = document.querySelector('canvas')
            var newImg = neues Bild();
            newImg.src = canvas.toDataURL("bild/png");
            document.body.insertBefore(neuesBild, Leinwand)
        }

        Funktion setXY(Objekt, x, y, Farbe) {
            var w = Objektbreite;
            var h = obj.höhe;
            var d = obj.daten;
            obj.data[4 * (y * w + x)] = Farbe[0];
            obj.data[4 * (y * w + x) + 1] = Farbe[1];
            obj.data[4 * (y * w + x) + 2] = Farbe[2];
            obj.data[4 * (y * w + x) + 3] = Farbe[3];
        }

        Funktion getXY(Objekt, x, y) {
            var w = Objektbreite;
            var h = obj.höhe;
            var d = obj.daten;
            var Farbe = [];
            Farbe[0] = Objekt.Daten[4 * (y * w + x)];
            Farbe[1] = Objekt.Daten[4 * (y * w + x) + 1];
            Farbe[2] = Objekt.Daten[4 * (y * w + x) + 2];
            Farbe[3] = Objekt.Daten[4 * (y * w + x) + 3];
            Farbe zurückgeben;
        }

        Funktion Ende() {
            let canvas = document.querySelector('canvas')
            canvas.onmousemove = null
        }
    </Skript>
</body>

</html>

Natürlich können Sie noch mehr Kreationen erstellen. Das Mosaik oben ist beispielsweise ein Quadrat. Sie können Ihr mathematisches Wissen nutzen, um es kreisförmig zu machen und es auszubreiten, wobei der Mittelpunkt des Kreises der Mittelpunkt der Maus ist.

Sie können auch einige Prozesse verbessern. Wenn beispielsweise die Mosaikposition falsch ist, können Sie die Leinwand löschen und erneut beginnen.
Oder führen Sie eine Nachbearbeitung durch und blenden Sie die Leinwand nach dem Exportieren des Bildes aus

Dies ist das Ende dieses Artikels mit Beispielen zur Verwendung von JS zum Mosaikieren von Bildern. Weitere relevante Inhalte zum Mosaikieren von JS-Bildern finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Three.js-Beispielcode zum Mosaikieren von Bildern
  • Verwenden Sie Javascript, um das Bildmosaik anzuzeigen und wechseln Sie zur Funktion „Text hinzufügen“
  • Verwenden Sie Javascript, um Bilder nach dem Mosaik anzuzeigen und zu wechseln

<<:  So stellen Sie Spring Boot mit Docker bereit

>>:  Detaillierte Installationsschritte für MySQL 8.0.11

Artikel empfehlen

Detailliertes Installationstutorial zur dekomprimierten Version von mysql5.7.19 (mit rein geknackter chinesischer Version von SQLYog)

Die Version Mysql5.7.19 ist eine neue Version, di...

Bei der Installation einer virtuellen Maschine auf Thinkpad VMware erscheint die Meldung „Dieser Host unterstützt Intel VT-x, aber Intel VT-x ist deaktiviert“ (Problemlösung)

Als ich heute VMware verwendete, um eine neue vir...

Vue implementiert die Benutzeranmeldungsumschaltung

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erklärung der Homologie und der Domänenübergreifendkeit, die für Front-End-Interviews erforderlich sind

Vorwort Wie wir alle wissen, treten bei Front-End...

Eine kurze Analyse der vsftpd-Dienstkonfiguration unter Linux (anonym, Benutzer, virtueller Benutzer)

vsftpd Übersicht vsftpd ist die Abkürzung für „ve...

Detaillierte Erklärung der Serveroptionen von Tomcat

1. Konfiguration Die ersten beiden sind standardm...

Implementierung der Konvertierung zwischen Unterstreichung und Camel Case in js (mehrere Methoden)

Inhaltsverzeichnis Anwendungsszenarien: Methode 1...

Ursachen und Lösungen für den Nginx 502 Bad Gateway-Fehler

Der Nginx 502 Bad Gateway-Fehler ist mir schon me...

CSS zum Ändern der Größe (Breite, Höhe) des Bildes, wenn die Maus über den Bild-Hyperlink fährt

So ändern Sie den Bild-Hyperlink, wenn Sie mit der...

React implementiert eine mehrkomponentige Wertübertragungsfunktion über Conetxt

Die Wirkung dieser Funktion ist ähnlich wie vue的p...

So installieren Sie Docker auf Raspberry Pi

Da Raspberry Pi auf der ARM-Architektur basiert, ...

Zusammenfassung zum Hinzufügen von Root-Berechtigungen für Benutzer in Linux

1. Fügen Sie einen Benutzer hinzu . Verwenden Sie...

Beispielcode zur Implementierung der Menüberechtigungssteuerung in Vue

Wenn Benutzer an einem Backend-Verwaltungssystem ...

So stellen Sie ein Vue-Projekt unter Nginx bereit

Heute werde ich den Server nginx verwenden und mu...

Detaillierte Erläuterung der ersten Erfahrungen mit Vue3.0 + TypeScript + Vite

Inhaltsverzeichnis Projekterstellung Projektstruk...