TWebBrowser Image (PNG) auslesen + anzeigen

[Mephisto090]

Hallo,

Ich will von einer seite ein bild vom Typ PNG auslesen und in einem TImage ausgeben
Der Dateiname von der PNG datei ist immer unterschiedlich.

Danke im Vorraus
Mephi

[Bernhard Geyer]

Dazu gehst du über den DOM des IE (MSHTML.pas einbinden und TWEbBrowser.Document nach IHTML2Document casten) und dann die Imgages-Auflistung durchsuchen.

[Mephisto090]

habe mich noch nicht so mit Image beschäftigt kannst du mir vllt eine ausführliche Methode geben

[chaosben]

Probiers mal so:

Delphi-Quellcode:

unit Unit1;

interface

uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
  Dialogs, ExtCtrls, StdCtrls, OleCtrls, SHDocVw, mshtml, ActiveX, winInet,
  pngimage, gifimage, jpeg;

type
  TForm3 = class(TForm)
    WebBrowser1: TWebBrowser;
    ListBox1: TListBox;
    Image1: TImage;
    Button1: TButton;
    procedure FormCreate(Sender: TObject);
    procedure Button1Click(Sender: TObject);
    procedure ListBox1Click(Sender: TObject);
  private
    { Private-Deklarationen }
  public
    { Public-Deklarationen }
  end;

var
  Form3: TForm3;

implementation

{$R *.dfm}

function GetURLCacheFile(AURL : String; const AData : TMemoryStream) : Integer;
var
  ice : PInternetCacheEntryInfo;
  iceSize : Cardinal;
  CacheEntry : Cardinal;
  DataSize : Cardinal;
  Buffer : Pointer;
begin
  iceSize:=MAX_CACHE_ENTRY_INFO_SIZE;

  Result:=-1;

  GetMem(ice, iceSize);
  try
    CacheEntry:=RetrieveUrlCacheEntryStream(PChar(AUrl), ice^, iceSize, false, 0);
    try
      if CacheEntry>0 then
      begin
        DataSize:=ice.dwSizeLow;
        Adata.Clear;
        AData.SetSize(DataSize);
        Buffer := AData.Memory;
        if ReadUrlCacheEntryStream(CacheEntry, 0, Pointer(Buffer^), DataSize, 0) then
          Result:=DataSize
        else
          RaiseLastOSError;

      end;
    finally
      UnlockUrlCacheEntryStream(CacheEntry, 0);
    end;
  finally
    FreeMem(ice, iceSize);
  end;
end;

procedure TForm3.Button1Click(Sender: TObject);
var
  doc : IHTMLDocument2;
  img : OleVariant;
  images : IEnumVARIANT;
  Fetched : Cardinal;
begin
  ListBox1.Clear;

  if Supports(WebBrowser1.Document, IHTMLDocument2, doc) and
     Supports(doc.images._newEnum, IEnumVARIANT, images)  then
  begin
    images.Reset;

    while images.Next(1, img, Fetched) = S_OK do
    begin
      ListBox1.Items.Add(img.src);
    end;
    
  end;
end;

procedure TForm3.FormCreate(Sender: TObject);
begin
  //WebBrowser1.Navigate('http://www.delphipraxis.net/topic156542_twebbrowser+image+png+auslesen+anzeigen.html');
  WebBrowser1.Navigate('http://commons.wikimedia.org/w/index.php?title=Special%3ASearch&search=png&go=Go');
end;

procedure TForm3.ListBox1Click(Sender: TObject);
var
  ms : TMemoryStream;
  FName : String;
begin
  if ListBox1.ItemIndex > -1 then
  begin
    ms := TMemoryStream.Create;
    GetURLCacheFile(ListBox1.Items[ListBox1.ItemIndex], ms);

    FName := IncludeTrailingPathDelimiter(ExtractFilePath(Application.ExeName)) +
             'test' + ExtractFileExt(ListBox1.Items[ListBox1.ItemIndex]);

    ms.SaveToFile(FName);

    ms.Free;

    Image1.Picture.LoadFromFile(FName);

    DeleteFile(FName);
  end;
end;

end.

[Mephisto090]

und das wird jetzt in einem TImage ausgeben weil ich da lese das es in eine Listbox geht

[chaosben]

Alle URL's der Bilder der Seite landen in der Listbox. Sobald man eine URL anklickt, zeigts das Bild im TImage an.

[toms]

Zitat:

Zitat von Mephisto090

und das wird jetzt in einem TImage ausgeben weil ich da lese das es in eine Listbox geht

das ist doch leicht zu ändern, dass es direkt in dem TImage angezeigt wird.

[Mephisto090]

wenns so wäre dann hätte ich es ja schon gemacht :-P

[Mithrandir]

Zitat:

Zitat von Mephisto090

wenns so wäre dann hätte ich es ja schon gemacht :-P

Boah ey...

Delphi - Grundlagen

//Edit: chaosben hat dir eine komplette Anwendung geschrieben. Ein kleines "Danke" wäre sicher nicht zuviel gewesen!

[EWeiss]

Zitat:

//Edit: chaosben hat dir eine komplette Anwendung geschrieben. Ein kleines "Danke" wäre sicher nicht zuviel gewesen!

OT..
So sehe ich das auch :)

gruss Emil

[Mephisto090]

ja sry recht herzlichen dank aus bloß bei den Quelltext sehe ich nicht durch (mag darn liegen das ich das nicht geschrieben habe) sprich ich würde gerne die listbox raus haben und nur 1 Bild 1 bestimmtes bild in ein TImage bekommen

nochmal danke an alle

[chaosben]

Es ist eine der wichtigsten Aufgaben eines Programmierers bestehenden Quellcode lesen und auf eigene Bedürfnisse anpassen zu können.

Vielleicht ist obiger Code nicht unbedingt schön. Doch, wenn du willst, beantworte ich deine Fragen dazu. :-)

[Mephisto090]

na wie mache ich das jetzt das es nicht in einer listbox steht sondern direkt in ein TImage rein kommt

[Mithrandir]

Ich kaue es dir jetzt vor und nehme für dich den Quelltext auseinander. Das mach ich genau einmal!

In der Unit gibt es 4 Funktionen/Prozeduren:

Delphi-Quellcode:

procedure TForm3.FormCreate(Sender: TObject);
procedure TForm3.ListBox1Click(Sender: TObject);
procedure TForm3.Button1Click(Sender: TObject);
function GetURLCacheFile(AURL : String; const AData : TMemoryStream) : Integer;

1.

Beim Erstellen des Formulars wird die Prozedur "FormCreate" aufgerufen. In ihr passiert nichts spektakuläres, außer, dass die TWebBrowser-Komponente, die während der Entwicklung auf das Formular gezogen wurde, eine Webseite über den .Navigate()-Befehl aufruft:

Delphi-Quellcode:

procedure TForm3.FormCreate(Sender: TObject);
begin
  WebBrowser1.Navigate('http://commons.wikimedia.org/w/index.php?title=Special%3ASearch&search=png&go=Go');
end;

Das war ja nicht weiter schwer....

2.

Nachdem die Seite erfolgreich geladen wurde (in der linken Hälfte zu sehen) kannst du auf Button1 klicken. Dabei wird die Prozedur "Button1Click" aufgerufen:

Delphi-Quellcode:

procedure TForm3.Button1Click(Sender: TObject);
var
  doc : IHTMLDocument2;
  img : OleVariant;
  images : IEnumVARIANT;
  Fetched : Cardinal;
begin
  ListBox1.Clear;

  if Supports(WebBrowser1.Document, IHTMLDocument2, doc) and
     Supports(doc.images._newEnum, IEnumVARIANT, images)  then
  begin
    images.Reset;

    while images.Next(1, img, Fetched) = S_OK do
    begin
      ListBox1.Items.Add(img.src);
    end;
   
  end;
end;

Was macht diese Prozedur? Zuerst wird die Listbox geleert (da vielleicht noch Einträge vom ersten Durchlauf drin stecken). Die if-Abfrage ist etwas spezifischer, da reicht es erstmal, wenn du sie zur Kenntnis nimmst und weißt: "Brauch' ich". Images: IEnumVARIANT ist ein sogenannter Enumerator. Stell es dir einfach als Array vor, in dem etwas gespeichert ist. Als bildliche Vorstellung für den Anfang reicht das allemal.

Sehr interessant dürfte für dich dieser Teil sein:

Delphi-Quellcode:

    while images.Next(1, img, Fetched) = S_OK do
    begin
      ListBox1.Items.Add(img.src);
    end;

Hier wird nämlich solange die URL des jeweils aktuellen Bildes (img.src) in die Listbox geschrieben, bis images.Next(1, img, Fetched) = S_OK nicht mehr gegeben ist. Und das passiert genau dann, wenn alle Bilder, die in dem Dokument über das <img>-Tag eingebunden sind, abgearbeitet sind. Frage: Wie oft wird die Schleife bei einem Bild wiederholt? Wird sie überhaupt ausgeführt?

3.

Ok, jetzt wurden alle Adressen der Bilder in die Listbox geladen. Was nun? Jetzt zeigt ein Klick auf den Eintrag in der Listbox ein Bild in einem TImage an. Wie wurde das realisiert?

Dazu werden jetzt die beiden letzten Funktionen benötigt. Fangen wir zuerst mit dem OnClick-Ereignis der Listbox an:

Delphi-Quellcode:

procedure TForm3.ListBox1Click(Sender: TObject);
var
  ms : TMemoryStream;
  FName : String;
begin
  if ListBox1.ItemIndex > -1 then
  begin
    ms := TMemoryStream.Create;
    GetURLCacheFile(ListBox1.Items[ListBox1.ItemIndex], ms);

    FName := IncludeTrailingPathDelimiter(ExtractFilePath(Application.ExeName)) +
             'test' + ExtractFileExt(ListBox1.Items[ListBox1.ItemIndex]);

    ms.SaveToFile(FName);

    ms.Free;

    Image1.Picture.LoadFromFile(FName);

    DeleteFile(FName);
  end;
end;

Zu Beginn wird geprüft, ob wir nicht außerhalb der Items geklickt haben. Denn es kann ja auch sein, dass nur ein Bild gefunden wird. Würden wir dann auf die freie weiße Fläche klicken, bekämen wir keinen Eintragsindex zurück, sondern nur die "-1". Dann wird ein TMemoryStream erstellt. Die nächste Funktion, GetURLCacheFile, werde ich jetzt nicht auseinanderpflücken. Aber soviel sei gesagt: Der erste Parameter gibt die URL des Bildes an, der zweite den Memorystream. Die Funktion holt jetzt aus dem Cache des Internet Explorers (denn nichts anderes ist die TWebBrowser-Komponente) die zu dieser URL passende Datei (in unserem Falle also das ausgewählte Bild) und speichert sie in den TMemoryStream. Von dort wird sie als temporäre datei namens "Test" in dem Ordner der Anwendung gespeichert. Anschließend wird die Datei in das Image1 geladen, und kann nun wieder aus dem Programmordner gelöscht werden.

Du müsstest jetzt also folgendes tun: Den Wert von Image.src (es handelt sich ja deiner Aussage nach nur um ein Bild) an die Funktion GetURLCacheFile() übergeben. Dann mit ms.SaveToFile die Datei temporär speichern und mit Image1.Picture.LoadFromFile wieder laden. Der nächste Schritt wäre dann, auf die temporäre Datei zu verzichten. Vista mag es zum Beispiel gar nicht, wenn ein Programm im Ordner "Programm" Dateien anlegt. Dafür dürfte die Funktion Image1.Picture.LoadFromStream interessant sein.

Viel Erfolg beim Probieren.

[chaosben]

@Daniel: *erleichtert* danke :)

btw.: ein TPicture hat leider kein LoadFromStream weil dabei nicht klar ist, was da für Daten kommen. Deshalb gibts nur LoadFromFile, weil man da die Endung der Datei auswerten kann.
Aber trotzdem: danke! :)

[Mithrandir]

Zitat:

Zitat von chaosben

@Daniel: *erleichtert* danke :)

Kein Ding. ;)

Zitat:

Zitat von chaosben

btw.: ein TPicture hat leider kein LoadFromStream weil dabei nicht klar ist, was da für Daten kommen. Deshalb gibts nur LoadFromFile, weil man da die Endung der Datei auswerten kann.

Ach, guck an... :gruebel:

[Mephisto090]

ich bedanke mich an die ausführliche erklärung und ich werde sie mir morgen mal ganz in ruhe anschauen

[Mephisto090]

also habe es Programmiert die png uses kennt mein delphi 7 nicht und wenn ich ein png datei anklicke dann kommt nur (unbekannte Bildendung .png)

[Mithrandir]

Versuch mal die folgende Komponente zu installieren: http://www.isheu.com/data_5095_1.aspx

Das ist ein Derivat der originalen TPNGImage-Komponente, die sich nun CodeGear unter den Nagel gerissen hat.

//Edit: Dann hast du das Projekt vorher nichtmal compilliert? Man, man, man...

[Mephisto090]

neues Problem der link sieht so aus und dahinter versteckt sich eine PNG datei

http://www.meinepage.de/test.php?1241016578

der zahlen Code ist immer unterschiedlich

[Mithrandir]

Zitat:

Zitat von Mephisto090

neues Problem der link sieht so aus und dahinter versteckt sich eine PNG datei

http://www.meinepage.de/test.php?1241016578

Code ibst immer untlerschiedlich

Der Link innerhalb des HTML-Dokuments? Gib mal ein echtes Beispiel.

[TurboMartin]

Du hast jetzt aber nicht vor, irgendwelche Captchas auszutricksen, oder? :stupid:

[Mephisto090]

das ist ein bild und wenn ich auf das bild rechte maustaste eigenschaften mache dann kommt der link von oben

[Mithrandir]

Zitat:

Zitat von TurboMartin

Du hast jetzt aber nicht vor, irgendwelche Captchas auszutricksen, oder? :stupid:

Der Witz war gut... :lol: :lol: :lol:

[Mephisto090]

nö will den bloß anzeigen lassen mehr net nur auslesen + anzeigen nicht irgentwie knacken oder sonst welchen spaß

[Mithrandir]

Zitat:

Zitat von Daniel G

Gib mal ein echtes Beispiel.

[Mephisto090]

hast per PN bekommen ^^

[Mithrandir]

Hab ich gemerkt..

Dann ist die Herangehensweise komplett falsch. Das hättest du uns vielleicht am Anfang freundlicherweise mitteilen können. Sorry, aber wenn du eine HTML-Seite nicht von einem normalen PNG-Bild unterscheiden kannst, dann tut mir das Leid. Ein Rechtsklick auf die Seite hätte dir verraten, dass es sich nicht um ein normales HTML-Dokument handelt. Du solltest dich mit den Indys näher beschäftigen. Wenn du das Bild aufrufst, antwortet der Server so:

Code:

HTTP/1.x 200 OK
Server: nginx
Date: Wed, 29 Apr 2009 15:50:14 GMT
Content-Type: image/png
Transfer-Encoding: chunked
Connection: keep-alive
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Content-Encoding: gzip
Vary: Accept-Encoding

Das Content-Type: image/png ist der interessante Part. Such einfach mal nach Bild mit Indy herunterladen oder Datei mit Indy herunterladen.

Das wars.

[Mephisto090]

kannst du mir eine seite empfehlen?