Data Url

2012-09-11

4431
0
網頁設計
2012-09-12

摘要:Data Url

最近使用一個技術，顯示圖片使用baset64

Data Url 格式有

	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圖片數據

	data:image/x-bmp;base64,base64編碼的bmp圖片數據 //切記在safari 一定要設定圖形的像素，才能正常顯示

	範例:<img id="m1" src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==" alt="Base64 encoded image" height="150" width="150">  

</img>

經過測試所有的瀏覽器都可以使用，但是在safari環境圖檔是bmp 無法正常顯示

原因是，當初在轉換Base64的時候並沒有設定圖型的像素，所以導致safari無法正常顯示。

寫文章並不為了什麼，只是撰寫文章的過程中，可以使我的去思考更多層面的東西，寫的過程中也可以再次回味學習到的東西，並深刻的印象在腦中。

當你還在找這些資訊學習時，我想安逸的生活還不適合你，一起努力吧。

回首頁