In diesem Artikel wird die JavaScript -Bildmanipulation in HTML5 untersucht, wobei der Schwerpunkt auf Leistungsoptimierung mithilfe von Web Worten zur Parallelisierung liegt. Die wichtigsten Take-Aways unterstreichen die Vorteile von Webarbeitern, insbesondere für Geräte mit mehreren Kernen. Ein Sepia -Toneffekt dient als Testfall.
Der anfängliche "Brute Force" -Ansatz wendet das Sepia -Effektpixel von Pixel im Hauptfaden an, was zu einer langsamen Leistung führt, insbesondere bei weniger leistungsstarken Hardware. Der Code verwendet ein Canvas -Element, um Pixeldaten direkt zugreifen und manipulieren.
Die HTML -Struktur ist einfach: Ein Bild (mop.jpg
) wird angezeigt, und ein Canvas -Element zeigt das verarbeitete Bild an. Der JavaScript -Code berechnet neue RGB -Werte für jedes Pixel unter Verwendung von Formeln, die einen zufälligen Rauschfaktor für einen natürlicheren SEPIA -Effekt enthalten.
Die Kern -Sepia -Verarbeitungsfunktion (processSepia
) ist in tools.js
für die Wiederverwendung definiert. Das Hauptskript (default.js
) verwendet zunächst eine Brute-Force-Methode, die alle Pixel durchführt. Dies wird dann mit einer Webwork -Implementierung verglichen.
Der Web -Worker -Ansatz unterteilt das Bild in Segmente (in diesem Beispiel vier), wobei jeder einem separaten Arbeiter zugewiesen wird. Jeder Arbeiter verarbeitet sein Segment unabhängig und verkürzt die Verarbeitungszeit erheblich. Die Ergebnisse werden dann im Hauptfaden rekombiniert. Die Datei pictureProcessor.js
enthält den Worker -Code, der einen Teil der Bilddaten empfängt, sie verarbeitet und die Ergebnisse an den Haupt -Thread zurücksendet.
Leistungsvergleiche demonstrieren die signifikanten Geschwindigkeitsverbesserungen, die mit Webarbeitern erzielt werden, insbesondere bei Hardware mit niedrigerem End. Der Artikel stellt jedoch auch fest, dass der Leistungsverstärkung für High-End-Maschinen aufgrund des Aufwand des Datenkopierens zwischen Threads weniger ausgeprägt sein könnte. Die Komplexität der Bildmanipulationsaufgabe sollte die Verwendung von Webarbeitern rechtfertigen. Der Artikel schließt mit einer Diskussion über das Portieren des Code in eine Windows 8 -Anwendung und einen FAQ -Abschnitt, der gemeinsame Fragen zu Web Worten und Image Manipulationsleistung behandelt. Das Endergebnis mit Web Worten ist unten angezeigt:
Das obige ist der detaillierte Inhalt vonVerwenden von Webarbeitern zur Verbesserung der Bildmanipulationsleistung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!