freeman4gu: HTML5/JavaScript temporäres Canvas-Element für Bildmanipulatione

SELF-Forum

HTML5/JavaScript temporäres Canvas-Element für Bildmanipulatione

freeman4gu
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich habe da ein Problem zu dem ich leider bisher keine passende Lösung finden konnte :(

ich habe ein an mehreren stellen transparentes png bild, dessen farbe über ein schieberegler verändert werden können soll, ich habe hier auch schon ein paar tutorials mit dem canvas element gesehen.

mein problem ist allerdings, das in meinem canvas element mehr als nur dieses eine bild dargestellt wird und möchte logischerweise nicht alle farben ändern, die logische folge wäre ein 2tes canvas element, nur ist dies im code möglich?

gibt es hier andere optionen, wie sieht es aus, wenn ich ein designmuster über das bild legen möchte, ala streifen oder sterne, die dann nur im nichttransparenten bereich angezeigt werden?

hoffe ihr könnt mir helfen, besten gruß
freeman4gu

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. HTML5/JavaScript temporäres Canvas-Element für Bildmanipulatione

    LX
    +1 Informationen zu den Bewertungsregeln

    Hi, freeman4gu!

    Du kannst so viele Canvas-Nodes aufmachen, wie der Browser Speicher dafür bereitstellen kann. Für die Abfrage, was transparent ist und was nicht, gibt es in der Canvas-API das ImageData-Interface, welches alle Pixel von oben links bis unten rechts Zeile für Zeile in jeweils 4 Werten (Rot, Grün, Blau, Undurchsichtigkeit) zurückgibt.

    Gruß, LX

    --
    RFC 1925, Satz 3: Mit ausreichendem Schub fliegen Schweine ganz wunderbar. (...)
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. HTML5/JavaScript temporäres Canvas-Element für Bildmanipulatione

      freeman4gu
      – Informationen zu den Bewertungsregeln

      Ah das ist natürlich super :) das würde mein problem lösen, nur wie mach ich denn noch ein canvas node auf? ich wollte ja jetzt nicht unbedingt auf der index.html noch ein canvas element rein tun

      Hi, freeman4gu!

      Du kannst so viele Canvas-Nodes aufmachen, wie der Browser Speicher dafür bereitstellen kann. Für die Abfrage, was transparent ist und was nicht, gibt es in der Canvas-API das ImageData-Interface, welches alle Pixel von oben links bis unten rechts Zeile für Zeile in jeweils 4 Werten (Rot, Grün, Blau, Undurchsichtigkeit) zurückgibt.

      Gruß, LX

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. HTML5/JavaScript temporäres Canvas-Element für Bildmanipulatione

        JürgenB Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo freeman4gu,

        ..., nur wie mach ich denn noch ein canvas node auf?

        schon mal document.createElement("canvas") probiert?

        Gruß, Jürgen

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. HTML5/JavaScript temporäres Canvas-Element für Bildmanipulatione

          freeman4gu
          – Informationen zu den Bewertungsregeln

          Manchmal isses einfach zu einfach! ;o)

          Hallo freeman4gu,

          ..., nur wie mach ich denn noch ein canvas node auf?

          schon mal document.createElement("canvas") probiert?

          Gruß, Jürgen

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln