Ergebnis 1 bis 3 von 3
Like Tree1Likes
  • 1 Post By salazar

Thema: HTML5 Tutorial: Canvas Pixelmanipulation

  1. #1
    salazar ist offline Mitglied
    registriert
    22-01-2016
    Ort
    Düsseldorf
    Beiträge
    26

    Post HTML5 Tutorial: Canvas Pixelmanipulation

    Hi,

    ich hab die letzten Tage ein kleines JavaScript Tutorial zum Thema "Canvas Pixelmanipulation" geschrieben das ich euch nicht vorenthalten möchte.

    Zum Inhalt:
    Zunächst werden die Grundlagen/Basics erläutert, bevor es dann ans verändern kompletter Bilder geht. Danach geht´s weiter mit ein paar Tricks und Optimierungsvorschlägen und darauf folgend wird dann erklärt wie man mit XY-Koordinaten die Farbwerte einzelner Pixel verändert, bzw. wie man die Farbwerte auslesen kann.

    Hier geht´s zum Tutorial: HTML5 Tutorial: Canvas Pixel Manipulation

    Vielleicht kann ja der ein oder andere etwas damit anfangen.
    Über Feedback würde ich mich freuen.
    Viel Spaß
    mikdoe likes this.

  2. #2
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.664

    AW: HTML5 Tutorial: Canvas Pixelmanipulation

    Zitat Zitat von salazar Beitrag anzeigen
    Danach geht´s weiter mit ein paar Tricks und Optimierungsvorschlägen
    du solltest dich nicht so sehr auf optimierung versteifen. optimieren sollte man, wenn es ein performanceproblem gibt und zwar an der stelle die das performanceproblem verursacht. sonst sollte einfach nur übersichtlichen code schreiben.

    Code:
    Um das iterieren über das Array zu optimieren empfehle ich unbedingt 2 Änderungen an dem obigen Beispiel vorzunehmen. Zum einen speichern wir imgData.data in einer extra Variablen und die for-Schleife schreiben wir wie folgt auch etwas anders.
    das kann man zwar noch machen
    test · jsPerf

    Code:
    Ich bevorzuge die Variante 2 mit dem Bitwise OR operator, weil das, wenn man sehr viele Pixel Zugriffe auf einmal hat, einfach ein Stück weit performanter läuft als mit Math.floor().
    das ist schon grenzwertig und definitiv schlechter lesbar
    test · jsPerf

  3. #3
    salazar ist offline Mitglied
    registriert
    22-01-2016
    Ort
    Düsseldorf
    Beiträge
    26

    AW: HTML5 Tutorial: Canvas Pixelmanipulation

    Hi,
    danke für dein Feedback und die beiden Tests!

    Ich möchte mich da auch gar nicht so drauf versteifen. Jedoch wollte ich da zumindest mal drauf hinweisen, bzw. ein paar mögliche Varianten aufzeigen.
    Aber wenn der Eindruck entsteht werde ich evtl. noch die ein oder andere Textpassage anpassen.

Ähnliche Themen

  1. [JQUERY] Bildbearbeitung HTML5 Canvas Fabric.js Jquery
    Von lukmorf im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 13-04-2015, 11:06
  2. HTML5 Canvas Progressbar
    Von unique24 im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 11-01-2015, 18:43
  3. HTML5 Canvas Element und onclick
    Von AndreM im Forum JavaScript
    Antworten: 9
    Letzter Beitrag: 08-08-2011, 23:30
  4. html5 Canvas Bilder vergrößern
    Von Zerod im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 14-01-2011, 14:14
  5. html5 canvas kopieren
    Von dizzlwizzl im Forum JavaScript
    Antworten: 8
    Letzter Beitrag: 11-11-2009, 21:18

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •