PNG verschmelzen

[creehawk]

@ Renate Schaaf

Nachdem ich rausgefunden hatte das die ImageCollection mit TWICImage arbeitet habe ich das so gemacht:

Delphi-Quellcode:

procedure TForm1.TestBtnClick(Sender: TObject);
var
  Png1: TWicImage;
  Png2: TPngImage;
begin
  Png1 := TWicImage.Create;
  Png2 := TPngImage.Create;
  try
    png1.Assign(ImageCollection.GetSourceImage(ImageCollection.GetIndexByName('Icon'), 128, 128));
    Png1.SaveToFile('Icon.png');
    Png2.LoadFromFile('Icon.png');
    ImageCollection.Draw(png2.Canvas, Rect(0, 0,128,128), 'Star');
    Image1.Picture.Graphic := png2;
    Image1.picture.Graphic.SaveToFile('IconWithStar.png');
  finally
    png1.Free;
    png2.Free;
  end;
end;

Perfect! Ich danke vielmals für den richtigen Schubs in die richtige Richtung.

Aber jetzt: Der Stern wird auf dem Icon nur da gezeichnet, wo der Hintergrund NICHT transparent ist..... Vielleicht noch eine Idee?

@mavarik
Echt jetzt !!!!
Habe ich gedacht!

Wie bei anderen Grafikprogrammen auch! Bild1 laden, Bild2 laden und ... und generös darüber hinwegsehen, das man auch da das Bild2 kopieren muss und in Bild1 einfügt, also "malt"...
Auf dem Bildschirm sieht es jedenfalls genau richtig aus.


creehawk

[Renate Schaaf]

Zitat:

Aber jetzt: Der Stern wird auf dem Icon nur da gezeichnet, wo der Hintergrund NICHT transparent ist..... Vielleicht noch eine Idee?

Dazu muss man erst einen Hintegrund erstellen. Leider kann man nicht einfach ein TPngImage erzeugen und auf dessen Canvas malen. Da braucht man eine TBitmap. Die Alpha-Unterstützung und die Unterstützung der verschiedenen Graphik-Formate ist in Delphi ziemlich hauruck-artig umgesetzt. Will man was machen, was etwas außer der Reihe ist, muss man frickeln. Dein Problem ist ein wunderbares Beispiel dafür.

Hier ist die erste Methode, die aber nicht ganz geht, siehe Kommentare:

Code:

procedure TForm1.btnIconWithStarClick(Sender: TObject);
var
  png: TPngImage;
  bm: TBitmap;
begin
  png := TPngImage.Create;
  try
    // png für die richtige Größe erstellen. Das 128,128 garantiert nicht, dass das
    // png wirklich eine Größe von 128x128 hat. Es wird nur das nächstbeste genommen.
    png.Assign(ImageCollection.GetSourceImage(ImageCollection.GetIndexByName
      ('Icon'), 128, 128));

    // Eine Bitmap für schwarzen Hintergrund machen
    // pf32bit wird für den alpha-channel gebraucht.
    bm := TBitmap.Create;
    try
      bm.PixelFormat := pf32bit;
      bm.SetSize(png.Width, png.height);
      bm.Canvas.Brush.Color := clBlack;
      bm.Canvas.FillRect(Rect(0, 0, bm.Width, bm.height));
      // png per alpha-blend auf den canvas von bm zeichen
      bm.Canvas.Draw(0, 0, png);
      // 'Star' auf bm zeichnen per ImageCollection.Draw
      // Das Rect kann bei Bedarf angepasst werden
      ImageCollection.Draw(bm.Canvas, Rect(0, 2 * bm.height div 3,
        bm.Width div 3, bm.height), 'Star');
      // bm enthält als alpha die durchsichtigen Teile von icon und star kombiniert.
      // Jetzt nur noch dieses alpha anwenden:
      bm.Alphaformat := afDefined;

      // Kombiniertes Bild anzeigen
      Image1.Picture.Graphic := bm;
      // Image1 zeigt jetzt wahrscheinlich die richtige Kombination an.

      // Das folgende geht aber nicht, weil VCL.Graphics nicht das alpha von bm auf png überträgt,
      // sondern die transparente Farbe, wahrscheinlich weil darüber die wenigsten Leute
      // meckern würden. Und wenn man bm erst transparent macht, gibt das immer hässliche Resultate.
      png.Assign(bm);
      // Das kombinierte Bild speichern
      png.SaveToFile('IconWithStar.png');
    finally
      bm.Free;
    end;
  finally
    png.Free;
  end;
end;

Um das Ergebnis nun auch korrekt abzuspeichern, brauchst du nun wirklich ein TWicImage.

Code:

procedure TForm2.btnIconWithStarTheRightWayClick(Sender: TObject);
var
  png: TPngImage;
  bm: TBitmap;
  wic: TWicImage;
begin
  png := TPngImage.Create;
  try
    // png für die richtige Größe erstellen. Das 128,128 garantiert nicht, dass das
    // png wirklich eine Größe von 128x128 hat. Es wird nur das nächstbeste genommen.
    png.Assign(ImageCollection.GetSourceImage(ImageCollection.GetIndexByName
      ('Icon'), 128, 128));

    // Eine Bitmap für schwarzen Hintergrund machen
    // pf32bit wird für den alpha-channel gebraucht.
    bm := TBitmap.Create;
    try
      bm.PixelFormat := pf32bit;
      bm.SetSize(png.Width, png.height);
      bm.Canvas.Brush.Color := clBlack;
      bm.Canvas.FillRect(Rect(0, 0, bm.Width, bm.height));
      // png per alpha-blend auf den canvas von bm zeichen
      bm.Canvas.Draw(0, 0, png);
      // 'Star' auf bm zeichnen per ImageCollection.Draw
      // Das Rect kann bei Bedarf angepasst werden
      ImageCollection.Draw(bm.Canvas, Rect(0, 2 * png.height div 3,
        png.Width div 3, png.height), 'Star');
      // bm enthält als alpha die durchsichtigen Teile von icon und star kombiniert.
      // Jetzt nur noch dieses alpha anwenden:
      bm.Alphaformat := afDefined;

      // Wenn du jetzt die Kombination als png mit dem richtigen Alpha speichern willst,
      // brauchst du ein TWicImage:
      wic := TWicImage.Create;
      try
        wic.Assign(bm);
        wic.ImageFormat := wifPng;
        //Das vorige Bild aus image1 löschen, sonst werden die übereinander gemalt, was dich irritiert hat
        image1.Picture:=nil;
        //kombiniertes Bild anzeigen
        Image1.Picture.Graphic:=wic;
        // Das kombinierte Bild speichern
        wic.SaveToFile('IconWithStar.png');
      finally
        wic.Free;
      end;
    finally
      bm.Free;
    end;
  finally
    png.Free;
  end;
end;

Edit: Jetzt fällt mir auf, dass man png.canvas gar nicht mehr braucht. Kann man also von vornherein mit TWicImage statt TPngImage arbeiten.

[Renate Schaaf]

Sorry, ich bin's schon wieder.

So geht es am kürzesten und besten, finde ich:

Code:

procedure TForm1.btnIconWithStarTheRightWayClick(Sender: TObject);
var
  bm: TBitmap;
  wic: TWicImage;
begin
  wic := TWicImage.Create;
  try
    wic.Assign(ImageCollection.GetSourceImage(ImageCollection.GetIndexByName
      ('Icon'), 128, 128));
    bm := TBitmap.Create;
    try
      //Durch assign ist automatisch bm.pixelformat=pf32bit und bm.Alphaformat=afDefined
      bm.Assign(wic);
      ImageCollection.Draw(bm.Canvas, Rect(0, 2 * wic.height div 3,
        wic.Width div 3, wic.height), 'Star');
      wic.Assign(bm);
      wic.ImageFormat := wifPng;
      Image1.Picture := nil;
      Image1.Picture.Graphic := wic;
      wic.SaveToFile('IconWithStar.png');
    finally
      bm.Free;
    end;
  finally
    wic.Free;
  end;
end;

So, jetzt hast du 3 Versionen zur Auswahl .

[creehawk]

Moin Moin!
zuerst mal sagenhaften vielfältigen Dank.

Ich hatte bis gestern abend auch schon ein paar Dinge enträtseln können, bin dann aber am Alphaformat=afDefined hängengeblieben.
Die Zeile mit

  ImageCollection.Draw(bm.Canvas, Rect(0, 2 * wic.height div 3,wic.Width div 3, wic.height), 'Star'); habe ich noch umgeändert in

  ImageCollection.Draw(bm.Canvas, Rect(0, 0, wic.height,wic.Width), 'Star'); damit der Stern etwas größer wird.

Nochmal: Vielen herzlichen Dank für deine Hilfe oder eigentlich schon fürs mitprogrammieren - und dann noch mitten in der Nacht wie ich eben sehe! Hut ab!

creehawk

[Renate Schaaf]

Zitat:

und dann noch mitten in der Nacht

Senile Bettflucht

[Blup]

Hab mal durchdacht, was bei der Verschmelzung zweier halbtransparenter Layer eigentlich passieren muss:

Code:

           
Betrachter      +++++++++++++++++

Layer1: R1G1B1 .................
        A1     -----------------

Layer2: R2G2B2 .................
        A2     -----------------

Hintergrund     _________________

für die Berechnung das Alpha-Byte auf 0 bis 1 normalisieren: 0.255 -> 0..1 (0 = durchsichtig .. undurchsichtig)

Code:

A1 = A1 / 255
A2 = A2 / 255

Code:

R = A1 * R1 + (1 - A1) * R2
G = A1 * G1 + (1 - A1) * G2
B = A1 * B1 + (1 - A1) * B2
A = 1 - ((1-A1) * (1-A2))

Gleichungen umgeformt:

Code:

R = A1 * (R1 - R2) + R2
G = A1 * (G1 - G2) + G2
B = A1 * (B1 - B2) + B2
A = A1 + A2 - A1 * A2

Alpha wieder als Byte darstellen:

Code:

A = A * 255 // 0..1 -> 0..255

[Uwe Raabe]

Bei folgenden Grenzwerten kommt aber meiner Meinung nach nicht das Richtige raus:

A1 = 255, A2 = 0: Das obere Bild 1 ist undurchsichtig und überdeckt somit das untere Bild 2. Erwartet wird also (R1, G1, B1, 255), aber raus kommt (R1, G1, B1, 0).

A1 = 0, A2 = 255: Das obere Bild 1 ist durchsichtig und lässt das untere Bild 2 vollständig durchscheinen. Der Hintergrund ist unsichtbar. Erwartet (R2, G2, B2, 255), aber raus kommt (R2, G2, B2, 0).

In beiden Fällen sieht man also nur den Hintergrund.

Wegen der Stetigkeit der Funktion vermute ich auch, dass die Zwischenwerte nicht (alle) richtig sind.

[Sherlock]

Zitat von creehawk:

Auf dem Bildschirm sieht es jedenfalls genau richtig aus.

In dem Fall könntest Du auch versuchen, einen Screenshot von dem Rectangle Deines Images machen.

Sherlock