大家可能注意到了,網頁上有些圖檔的src或css背景圖檔的url後面跟了一大串字元,比如:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMjAvMTIGkKG+AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAB1JREFUCJljONjA8LiBoZyBwY6BQQZMAtlAkYMNAF1fBs/zPvcnAAAAAElFTkSuQmCC
那麼這是什麼呢?這是Data URI scheme。
Data URI scheme是在RFC2397中定義的,目的是将一些小的資料,直接嵌入到網頁中,進而不用再從外部檔案載入。比如上面那串字元,其實是一張小圖檔,将這些字元複制黏貼到火狐的位址欄中并轉到,就能看到它了,一張1X36的白灰png圖檔。
在上面的Data URI中,data表示取得資料的協定名稱,image/png 是資料類型名稱,base64 是資料的編碼方法,逗号後面就是這個image/png檔案base64編碼後的資料。
目前,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圖檔資料
base64簡單地說,它把一些 8-bit 資料翻譯成标準 ASCII 字元,網上有很多免費的base64 編碼和解碼的工具,在PHP中可以用函數base64_encode() 進行編碼,如echo base64_encode(file_get_contents(‘wg.png’));
目前,IE8、Firfox、Chrome、Opera浏覽器都支援這種小檔案嵌入。
舉個圖檔的例子:
網頁中一張圖檔可以這樣顯示:
<img src="http://mail.163.com/images/x.png" />
也可以這樣顯示:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMjAvMTIGkKG+AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAB1JREFUCJljONjA8LiBoZyBwY6BQQZMAtlAkYMNAF1fBs/zPvcnAAAAAElFTkSuQmCC" />
把圖像檔案的内容直接寫在了HTML 檔案中,這樣做的好處是,節省了一個HTTP 請求。壞處是浏覽器不會緩存這種圖像。
c#背景代碼:
private string decodeBase64ToJpg(string dataURL,string imgName)
{
try
{
string filePath = "D:\\Temp\\images\\" + imgName;
byte[] arr = Convert.FromBase64String(dataURL.Substring(dataURL.IndexOf("base64,") + 7).Trim('\0'));
using (MemoryStream ms = new MemoryStream(arr))
{
Bitmap bmp = new Bitmap(ms);
//建立第二個bitmap類型的bmp2變量
Bitmap bmp2 = new Bitmap(bmp, bmp.Width, bmp.Height);
//将第一個bmp拷貝到bmp2中
Graphics draw = Graphics.FromImage(bmp2);
draw.DrawImage(bmp,0,0);
draw.Dispose();
bmp2.Save(filePath, System.Drawing.Imaging.ImageFormat.Jpeg);
ms.Close();
return filePath;
}
}
catch (Exception ex)
{
return "";
}
}
public string decodeBase64ToPng(string dataURL, string imgName)
{
string filename = "";//聲明一個string類型的相對路徑
string imagesurl2 = "";
String base64 = dataURL.Substring(dataURL.IndexOf(",") + 1); //将‘,’以前的多餘字元串删除
System.Drawing.Bitmap bitmap = null;//定義一個Bitmap對象,接收轉換完成的圖檔
try//會有異常抛出,try,catch一下
{
String inputStr = base64;//把純淨的Base64資源扔給inpuStr,這一步有點多餘
byte[] arr = Convert.FromBase64String(inputStr);//将純淨資源Base64轉換成等效的8位無符号整形數組
System.IO.MemoryStream ms = new System.IO.MemoryStream(arr);//轉換成無法調整大小的MemoryStream對象
System.Drawing.Bitmap bmp = new System.Drawing.Bitmap(ms);//将MemoryStream對象轉換成Bitmap對象
ms.Close();//關閉目前流,并釋放所有與之關聯的資源
bitmap = bmp;
filename = imgName;//所要儲存的相對路徑及名字+ ".png"
//string tmpRootDir = Server.MapPath(System.Web.HttpContext.Current.Request.ApplicationPath.ToString()); //擷取程式根目錄
imagesurl2 = "D:\\Temp\\images\\" + filename; //轉換成絕對路徑
bitmap.Save(imagesurl2, System.Drawing.Imaging.ImageFormat.Png);//儲存到伺服器路徑
}
catch (Exception)
{
}
return imagesurl2;//傳回路徑
}
前端代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax</title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="upload">
<input type="button" class="btn" onclick="img_upload_file.click()" value="上傳">
<input type="file" id="img_upload_file" style="display: none;" class="test">
<div class="img_center">
<img src="" id="img_upload_show" style="border: #0000FF solid 2px;width: 600px;height: 600px;">
</div>
</div>
<script type="text/javascript">
var jsonData = '';
$(function() {
$("#img_upload_file").change(function() {
var oFile = this.files[0];
console.log("oFile")
console.log(oFile)
var reader = new FileReader();
reader.readAsDataURL(oFile); //調用自帶方法進行轉換
reader.onload = function(e) {
$("#img_upload_show").attr("src", this.result); //将轉換後的編碼存入src完成預覽
var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
console.log(oFile.type);
if(!rFilter.test(oFile.type)) {
alert("檔案格式必須為圖檔");
return;
}
/*if(oFile.size > iMaxFilesize) {
alert("圖檔大小不能超過2M");
return;
}*/
var xyString1 = "462.7558,722.0276,12734808.3808,3570844.6208";
var xyString2 = "1272.6326,760.5932,12734820.7004,3570844.3868";
var xyString3 = "394.1948,953.4210,12734808.2984,3570839.6826";
var xyString4 = "1268.3476,996.2716,12734820.7004,3570839.4260";
jsonData = oFile.name + " " + oFile.type + " " + this.result + " " + xyString1 + " " + xyString2 + " " + xyString3 + " " + xyString4;
console.log(jsonData);
$.ajax({
url: 'http://127.0.0.1:6163/igs/rest/test/GetImage',
data: jsonData,
type: "POST",
dataType: "json",
contentType: 'application/x-www-form-urlencoded;charset=UTF-8', //防止亂碼
success: function(data) {
console.log(data);
}
});
};
});
})
</script>
</body>
</html>