<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Data URI</title>
<link href="data:text/css;base64,77u/aW1nICANCnsNCiAgICBib3JkZXI6IDFweCBzb2xpZCByZWQ7DQp9DQo=" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<img src="data:image/gif;base64,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" />
</form>
</body>
</html>
在HTML裡link的href及img的src,並沒有指向某個URL,而是直接嵌入一段Base64編碼,而IE8+, Firefox, Safari, Opera, Chrome都能正確顯示其中的圖檔與CSS設定。
using System;
using System.IO;
public partial class DataURI_Default : System.Web.UI.Page
{
private string GenDataURI(string contentType, string filePath)
{
byte[] buff = File.ReadAllBytes(filePath);
return string.Format("data:{0};base64,{1}",
contentType, Convert.ToBase64String(buff));
}
protected void Page_Load(object sender, EventArgs e)
{
string path = Request["path"] ?? "";
if (!string.IsNullOrEmpty(path) &&
File.Exists(Server.MapPath(path)))
{
string contentType = "";
switch (path.ToLower().Substring(path.Length-4, 4))
{
case ".jpg":
contentType="image/jpeg";
break;
case ".gif":
contentType="image/gif";
break;
case ".png":
contentType="image/png";
break;
case ".htm":
contentType="text/html";
break;
case ".css":
contentType="text/css";
break;
default:
Response.Write("Not supperted file type!");
Response.End();
break;
}
Response.Write(GenDataURI(contentType, Server.MapPath(path)));
Response.End();
}
}
}