Implementieren Sie bilineare Interpolation und bikubische Interpolation in js

Kostenlose Lernempfehlung: js-Video-Tutorial

• Einführung in
• bilineare Interpolation
• • Prinzip
• bikubische Interpolation Methode
• • Prinzip
• js-Implementierung

Einführung

Beim Verwenden von Canvas zum Zeichnen auf einer Webseite ist ein Problem aufgetreten. Die ursprüngliche Datenauflösung ist sehr gering und das Bild muss auf die gesamte Webseite vergrößert werden, sodass die Daten vergrößert werden müssen durch Interpolation. Ich habe die bilineare Interpolation und die kubische Interpolation gelernt. Beide Methoden werden mit js-Code implementiert. Die bilineare Interpolation führt eine lineare Interpolation der Daten durch jeweils in x- und y-Richtung.

Die Matrix der Originaldaten ist ein zweidimensionales Array, die Größe ist a*b, die Zielmatrixgröße ist m*n, m, n kann größer (vergrößert) oder kleiner (verkleinert) als a sein, b, natürlich kann das Verhältnis auch variieren. Es hängt davon ab, wie groß Ihre interpolierten Daten sein müssen.

Die Grundidee besteht darin, die Koordinaten der Zielmatrix, z. B. den Punkt x*y, zu durchlaufen, die entsprechende Position dieses Punkts in der Originalmatrix zu finden, die als Mapping-Punkt bezeichnet wird, und dann die vier Punkte zu finden, die die Mapping umgeben Punkt P in der ursprünglichen Matrix. Führen Sie dann zwei lineare Interpolationen basierend auf dem Abstand vom Abbildungspunkt P zu den Koordinaten in der x- und y-Richtung der vier Punkte durch, um den Wert des Abbildungspunkts zu erhalten.

Wie in der Abbildung oben gezeigt, ist Punkt p die Position, an der der x*y-Punkt in der Zielmatrix in der ursprünglichen Matrix abgebildet ist. Die nächsten vier Punkte um ihn herum sind Q12, Q11, Q21 und Q22. Jetzt wird eine lineare Interpolation in x-Richtung durchgeführt, um die Werte der beiden Punkte R1 und R2 zu erhalten. Anschließend wird linear in y-Richtung interpoliert, um den Wert von Punkt P zu erhalten.

Hinweis: Nach der Verwendung der bilinearen Interpolation zur Verstärkung der Daten tritt bei zu großer Vergrößerung nach der Bildgenerierung ein offensichtliches Mosaikphänomen auf. Den Implementierungscode finden Sie im folgenden js-Code.

Bikubische Interpolationsmethode


Prinzip


Die doppelte kubische Interpolation wird auch als kubische Faltungsinterpolation bezeichnet. Die kubische Faltungsinterpolation ist eine komplexere Interpolationsmethode. Dieser Algorithmus verwendet für die kubische Interpolation den Grauwert von 16 Punkten rund um den abzutastenden Punkt und berücksichtigt dabei nicht nur den Graueinfluss der vier direkt benachbarten Punkte, sondern auch den Einfluss der Änderungsrate des Grauwerts zwischen benachbarten Punkten. Das spezifische Prinzip finden Sie im folgenden Blog:

Siehe den Blog hier

Das Grundprinzip besteht darin, zuerst den Abbildungspunkt P des Mittelpunkts der Zielmatrix in der Quelldatenmatrix zu finden und dann die 16 Punkte um den P-Punkt herum zu finden , und dann entsprechend dem Koordinatenabstand des P-Punkts 16 Berechnen Sie für den Abstand zwischen Punkten in x- und y-Richtung das Gewicht jedes Punkts und schließlich den Wert von, nachdem Sie jeden Punkt mit dem Gewicht multipliziert haben P kann durch Addition erhalten werden.

BiCubic-Funktion:

Unter diesen hat die BiCubic-Funktion, wenn a -0,5 ist, die folgende Form:

Wenn a = -0,5, sind die verstärkten Daten ziemlich gut, das erzeugte Bild ist sehr glatt. und viele Daten werden detailliert gespeichert.
Ich habe nicht eingehend untersucht, warum diese Funktion verwendet werden sollte, aber nach Verwendung dieser Methode zur Verstärkung der Daten ist der erzeugte Bildeffekt ohne Mosaikphänomen sehr gut Javascript

(Video)

Das obige ist der detaillierte Inhalt vonImplementieren Sie bilineare Interpolation und bikubische Interpolation in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!