Gibt es eine Möglichkeit, Farben eines Bildes ähnlich wie in Flash / ActionScript zu ändern, indem nur HTML5 / CSS / JavaScript verwendet wird?
Hier ein Beispiel in Flash: Ссылка BEARBEITEN: Dies ist der Prozess, den ich möchte duplizieren.
Ich versuche, so etwas zu erreichen (Farbwechsel, Licht und Schatten erhalten): Ссылка OHNE laden & amp; Ersetzen jedes Mal ein neues Bild; Ich möchte einfach den Farbton ändern können (d. H. Eine reine HTML5 / CSS / JS-Methode). BEARBEITEN: Dies ist das Ergebnis, das ich erreichen möchte, nicht den Prozess.
Grundsätzlich möchte ich die Palette / Ton eines Bildes ändern, während die anderen Aspekte des Bildes (wie Farbverlauf, Beleuchtung, etc.) erhalten bleiben. Ich bin nahe gekommen, aber nicht nahe genug; Ich bin an den Punkt gekommen, wo ich eine Bildmaske verwende und diese über das Originalbild (ähnlich einer transparenten Bildüberlagerung) zusammenfüge. Im Folgenden finden Sie einen Beispielcode (bitte beachten Sie, dass dies nur ein Ausschnitt ist, damit es funktioniert oder nicht; ich zeige nur Beispielcode, damit Sie eine Vorstellung davon bekommen, was ich versuche):
%Vor%Das Hauptproblem bei der Verwendung dieses Ansatzes ist, dass die Bilder wirklich flach aussehen. Es fehlt noch etwas, oder die Maske, die ich benutze (ein weißes, unregelmäßiges Bild), ist der falsche Ansatz.
Für diese Funktion muss das Bild geladen werden und es muss von der gleichen Domäne sein (aufgrund der Domänenübergreifende Richtlinie)
%Vor%Angenommen, Ihr Markup sieht folgendermaßen aus:
%Vor%Sie könnten es verwenden, indem Sie es mit den folgenden Parametern aufrufen:
%Vor%Arbeitsbeispiel hier: Ссылка
Sicher, Sie können die Pixeldaten abrufen und HSV-Anpassungen daran vornehmen. Die gewünschte Methode ist getImageData (die ein UInt8Array und kein normales js-Array zurückgibt).
Es gibt eine schöne Hier , die Ihnen den Einstieg erleichtern soll. Sie können transparente Canvas-Elemente übereinander legen, um Probleme bei der Anpassung von Basiskomponenten zu vermeiden (in Ihrem Fahrzeugbeispiel die Reifen, Fenster usw.).
Normalerweise ist es etwas, das Sie auf der Serverseite tun würden, wenn Sie ein Bild Pixel für Pixel ändern, da es für den Browser sehr schwer ist. Im Falle der Acura-Website gibt es nichts Schlimmeres - sie haben nur eine Menge verschiedener JPGs. Sie könnten auch versuchen, in Processing.js zu suchen.
Tags und Links javascript css html5 canvas html5-canvas