C# 實作 Data URL 產生器：使用 Visual Studio 2010 打造圖片轉 Base64 嵌入工具

什麼是 Data URL？

Data URI scheme（RFC 2397）讓小型資料直接嵌入網頁，避免外部檔案請求。格式：data:[媒體類型][;base64],資料。例：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAA..." width="16" height="16" />

支援類型：文字、HTML、CSS、JavaScript、圖片、圖示等。

打造 Data URL 產生工具步驟

1. VS2010 新建 C# Windows Forms 專案。
2. 表單加入：Label、兩個 TextBox（路徑、結果）、一個 Button（瀏覽）。
3. 設定元件 Name 與 Text 屬性。
4. 瀏覽按鈕點擊事件實作：

private void button_browse_Click(object sender, EventArgs e) {
  OpenFileDialog fbd = new OpenFileDialog();
  fbd.Title = "請選擇一張圖片：";
  fbd.CheckFileExists = true;
  fbd.FileName = Environment.GetFolderPath(Environment.SpecialFolder.MyComputer);
  if (fbd.ShowDialog() == DialogResult.OK) {
    textBox_saveDir.Text = fbd.FileName;
    try {
      Image img = Image.FromFile(textBox_saveDir.Text, true);
      MemoryStream ms = new MemoryStream();
      ImageFormat fmt = ImageFormat.Png;
      string ext = Path.GetExtension(textBox_saveDir.Text).ToLower();
      switch (ext) {
        case ".gif": fmt = ImageFormat.Gif; break;
        default: ext = ".png"; break;
      }
      img.Save(ms, fmt);
      textBox1.Text = "<img src=\"data:image/" + ext.TrimStart('.') + ";base64," +
        Convert.ToBase64String(ms.GetBuffer()) + "\" width=\"" + img.Width +
        "\" height=\"" + img.Height + "\" />";
    }
    catch (Exception ex) {
      textBox1.Text = "錯誤：" + ex.Message + "\r\n堆疊：" + ex.StackTrace;
    }
  }
}

測試方法

1. 執行程式，選擇圖片產生 Data URL。
2. 將完整 <img ... /> 複製到文字檔，存為 .html。
3. 以瀏覽器開啟驗證圖片顯示。

原始碼下載

Data URL 產生工具 C# 原始碼