1. 程式人生 > >瀏覽器 WebBrowser 直接從記憶體資料顯示圖片而不是連結一個外部檔案

瀏覽器 WebBrowser 直接從記憶體資料顯示圖片而不是連結一個外部檔案

如何讓網頁裡面的圖片,直接從記憶體資料載入,而不是一個圖片檔案的連結

查了一些資料,基本概念如下:

2. Data URI scheme 包括:
data:,文字資料
data:text/plain,文字資料
data:text/html,HTML程式碼
data:text/html;base64,base64編碼的HTML程式碼
data:text/css,CSS程式碼
data:text/css;base64,base64編碼的CSS程式碼
data:text/javascript,Javascript程式碼
data:text/javascript;base64,base64編碼的Javascript程式碼
data:image/gif;base64,base64編碼的gif圖片資料
data:image/png;base64,base64編碼的png圖片資料
data:image/jpeg;base64,base64編碼的jpeg圖片資料
data:image/x-icon;base64,base64編碼的icon圖片資料

3. 在 HTML 裡面,圖片通常是 <img src="http://www.abc.com/abc.jpg"> 這樣的連結。這個連結也可以是本地檔案。換成 Data URI scheme 的寫法:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

上面的寫法的格式是在 base64 後面,加上了 base64 編碼的圖片資料。這樣就可以直接內嵌圖片資料在網頁裡面,而不是引用外部檔案。


用 Delphi 程式碼來測試上述方法。先寫一個 HTML 網頁:
<html>
<head>
<script language="JavaScript">
function setImageData(imageBase64) {
    var myImg = document.getElementById("myImg");
    myImg.src = "data:image/jpeg;base64," + imageBase64;
}
</script>
</head>
<body>
<img id="myImg" src="data:image/jpeg;base64,MyImageDataEncodedInBase64=" alt="My Image data in base 64" />

</body>
<html>

這個網頁裡面的 JS 用來對網頁裡面的 <img id="myImg"...> 填入資料。

在 delphi 裡面首先載入這個網頁,然後載入一個 JPG 圖片並編碼為 base64 字串,並且要去掉其結尾的回車符,否則執行載入圖片資料的JS時候會出現“未結束的字串常量”的錯誤提示。 FMyPicStr := Trim(FMyPicStr);

然後,在 Delphi 裡面,呼叫上述 JS 載入資料。圖片顯示出來了。測試成功。

呼叫上述 JS 的方法是呼叫這個 JS 的函式名。程式碼如下:
procedure TForm1.Button4Click(Sender: TObject);
var
  doc: IHTMLDocument2;
  S: string;
begin
  //執行 JavaScript 的時候,碰到“未結束的字串常量”的錯誤。
  //查,是因為 圖片字串結尾有回車符號。增加 FMyPicStr := Trim(FMyPicStr); 後,問題解決,圖片顯示出來了。
  doc := WebBrowser1.Document as IHTMLDocument2;

  S := 'setImageData("' + FMyPicStr + '");';
  Memo1.Lines.Text := S;
  doc.parentWindow.execScript(S, 'JavaScript');
end;

這裡是靠拼字串,把 JS 的函式名稱和引數拼到一起的。看網上的 C# 程式碼,可以不用拼字串。C#程式碼如下:
webBrowser1.Document.InvokeScript("setImageData", new[] { imageInBase64 });

但 delphi 裡面的 IHTMLDocument2 好像沒有 InvokeScript 這個方法。

上述圖片顯示出來後,還可以通過追加 HTML 字串的方式,追加一個圖片在上面的圖片下面,程式碼如下:

procedure TForm1.Button5Click(Sender: TObject);
var
  HTDoc: IHTMLDocument2;
  Range: IHTMLTxtRange;
  S: string;
begin
{-----------------------------------------------------------------------------
  寫入一段 HTML 文字到瀏覽器裡面。這個文字包括圖片及圖片資料。以下程式碼測試成功。
  成功地在上面一個圖片的下面,追加了一個圖片並顯示了出來。
-----------------------------------------------------------------------------}
  S := '<img src="data:image/jpeg;base64,' + Self.FMyPicStr + '">';


  HTDoc := WebBrowser1.Document as IHTMLDocument2;


  if (HTDoc <> nil) then
  begin
    Range := (HTDoc.body AS IHTMLBodyElement).createTextRange;
    Range.Collapse(False);
    Range.PasteHTML(S);
  end;
end;

上面的程式碼,就是直接拼裝一段 HTML 的 img 描述,在描述裡面使用 Data URI scheme 並直接在裡面寫入圖片的 base64 編碼資料。