zwei Canvas mit der gleichen Pixelgröße gegeben, wobei canvas1 ein beliebiges Bild (jpg, png oder so) enthält und canvas2 schwarze und nicht-schwarze Pixel enthält.
was ich erreichen möchte: mit einem dritten canvas3 möchte ich canvas1 klonen und jedes schwarze canvas2-pixel (kann einen schwellenwert enthalten) transparent in canvas3 sein
Ich habe bereits eine funktionierende Lösung wie folgt:
%Vor%Das Problem mit dem obigen (Pseudo) Code ist, dass es langsam ist Also meine Frage ist: Jeder kann eine Idee teilen, wie man das deutlich beschleunigt? Ich habe über Webgl nachgedacht, aber ich habe nie damit gearbeitet - also habe ich keine Ahnung von Shadern oder den dafür benötigten Tools oder Begriffen. Eine andere Idee war, dass ich canvas2 irgendwie sehr schnell in Schwarz und Weiß umwandeln könnte (nicht nur jedes Pixel in einer Schleife wie oben modifizieren) und mit Mischmodi arbeiten würde, um die transparenten Pixel zu erzeugen
jede Hilfe wird sehr geschätzt
Beantworte ich meine eigene Frage, biete ich eine Lösung an, um ein beliebiges Bild mit einem schwarzen und weißen Bild zu verbinden. Was noch fehlt ist, wie man den Alpha-Kanal für nur eine Farbe einer Leinwand einstellt.
Ich teile die Frage in Stücke und beantworte sie jeweils.
Frage 1: Wie konvertiert man eine Leinwand in Graustufen, ohne jedes Pixel zu durchlaufen?
Antwort: Zeichnen Sie das Bild auf eine weiße Leinwand mit dem Mischmodus "Luminosität"
%Vor%Frage 2: Wie konvertiert man eine Graustufen-Leinwand in Schwarz und Weiß, ohne jedes Pixel zu durchlaufen?
Antwort: zwei Mal Farb-Ausweichen Mischmodus mit Farbe #FEFEFE wird den Job
tun %Vor%Hinweis: Diese Funktion setzt voraus, dass schwarze Bereiche schwarz und alle nicht schwarzen Pixel weiß werden sollen! Somit wird ein Graustufenbild, das kein schwarzes Pixel aufweist, vollständig weiß Der Grund, warum ich diese Operation gewählt habe, ist, dass es in meinem Fall besser funktioniert und nur zwei Blend-Operationen verwenden bedeutet, dass es ziemlich schnell ist - wenn du willst, dass mehr dunkle Pixel schwarz bleiben und mehr weiße Pixel weiß werden, kannst du die kommentierte for-Schleife verwenden das Bild vorher. Auf diese Weise werden dunkle Pixel schwarz und hellere Pixel dunkler. Wenn Sie die Menge an schwarzen Pixeln mit color-dodge erhöhen, wird der Rest des Jobs wieder ausgeführt.
Frage 3: Wie füge ich eine weiße und eine weiße Leinwand mit einer anderen Leinwand zusammen, ohne jedes Pixel zu durchlaufen?
Antwort: Verwenden Sie den Mischmodus "Multiplizieren"
%Vor%Frage 4: Wie invertiere ich eine schwarze und weiße Leinwand, ohne jedes Pixel zu durchlaufen?
Antwort: Verwenden Sie den "Differenz" -Mischmodus
%Vor%Nun kann ein Canvas-Bild mit einer Canvas-Maske "zusammengeführt" werden, die man machen kann
%Vor%bezüglich der Leistung: Offensichtlich sind diese Mischmodi viel schneller als das Modifizieren jedes Pixels und um ein bisschen schneller zu werden, kann man alle Funktionen nach Bedarf in einer Funktion zusammenfassen und nur einen tmpcanvas recyceln - aber das bleibt dem Leser überlassen ^^
als Nebenbemerkung: Ich habe getestet, wie sich die Größe des resultierenden png unterscheidet, wenn Sie das Ergebnis von getBlendedImageWithBlackNWhite mit demselben Bild vergleichen, aber die schwarzen Bereiche transparent gemacht werden, indem jedes Pixel wiederholt und der Alpha-Kanal eingestellt wird Der Unterschied in der Größe ist fast nichts und wenn Sie also die Alpha-Maske nicht wirklich brauchen, reicht die Information, dass jedes schwarze Pixel transparent sein soll, für eine weitere Verarbeitung.
Hinweis: Mit der Funktion invertCanvas ()
kann die Bedeutung von Schwarz und Weiß invertiert werdenWenn Sie mehr darüber erfahren möchten, warum ich diese Mischmodi verwende oder wie die Mischmodi wirklich funktionieren Sie sollten die Mathematik dahinter überprüfen - imho Sie sind nicht in der Lage, solche Funktionen zu entwickeln, wenn Sie nicht wissen, wie sie wirklich funktionieren: Mathe hinter Mischmodi Leinwandkomposition Standard einschließlich ein wenig Mathe
brauchen ein Beispiel - sehen Sie den Unterschied: Ссылка
Tags und Links javascript transparency