個人blog，歡迎關注加收藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<img id="img"/>
<script type="text/javascript">
//将圖檔轉碼成base64位字元的原因：
//Base64圖檔是将圖檔轉換成加密的代碼，可以存放于CSS檔案當中，和CSS檔案一起被請求，可以加快頁面的加載速度。
//可以減少ajax請求(字元适于儲存，不用再發送ajax請求圖檔路徑資源)，還有加密效果
//但是注意：當圖檔較大(＞200k)時，不适宜圖檔轉碼base64位字元，因為很大的圖檔轉碼成字元後會很長，解析需要很長時間，可能會影響頁面其他内容的解析
//使用情景：
//1.一般用于小圖示（十幾K以下），也就是HTTP響應時間遠遠大于下載下傳時間的時候，用此方法優化會看到明顯的效果；
//2.當我們的一個頁面中要傳入很多圖檔時，特别是一些小圖示，十幾K、幾K，甚至是位元組級别大小的小圖示，這些小圖示都會增加HTTP請求，
// 假如多了，就會給伺服器帶來很大的壓力。比如要下載下傳一些一兩K大的小圖示，其實請求時帶上的額外資訊有可能比圖示的大小還要大。
// 是以，在請求越多時，在網絡傳輸的資料自然就越多了，傳輸的資料自然也就變慢了。而這裡，我們采用Base64的編碼方式将圖檔直接嵌入到網頁中，
// 而不是從外部載入，這樣就減少了HTTP請求。當然了，它有一個小缺點，就是使目前頁面的大小變大了（對于優化來說，其實這個可以忽略，影響不大）。
//3.這類圖檔從誕生之日起，基本上很少被更新
//怎麼使用:
//1.在開發的最開始即生成，base64的js檔案是在開發中就生成的了，而不是在使用者通路時才去生成
//2.将每張圖檔的base64編碼放在一個js對象裡
//一、根據img标簽擷取base64編碼:少
/**
*
* @param img html的img标簽
* @param ext 圖檔格式
* @returns {string}
*/
// function getImageBase64(img, ext) {
// var canvas = document.createElement("canvas"); //建立canvas DOM元素，并設定其寬高和圖檔一樣
// canvas.width = img.width;
// canvas.height = img.height;
// var ctx = canvas.getContext("2d");
// ctx.drawImage(img, 0, 0, img.width, img.height); //使用畫布畫圖
// var dataURL = canvas.toDataURL("image/" + ext); //傳回的是一串Base64編碼的URL并指定格式
// canvas = null; //釋放
// return dataURL;
// }
// //使用：
// var user_icon = document.getElementById('icon');
// user_icon.src = img_path; //指定圖檔路徑
// user_icon.onload = function () {
// base64 = getImageBase64(user_icon, fileExt); //base64編碼
// }
//二、根據圖檔路徑轉化為base64編碼字元
/**
*
* @param url 圖檔路徑
* @param ext 圖檔格式
* @param callback 結果回調
*/
function getUrlBase64(url, ext, callback) {
var canvas = document.createElement("canvas"); //建立canvas DOM元素
var ctx = canvas.getContext("2d");
var img = new Image;
img.crossOrigin = 'Anonymous';
img.src = url;
img.onload = function () {
canvas.height = 60; //指定畫闆的高度,自定義
canvas.width = 85; //指定畫闆的寬度，自定義
ctx.drawImage(img, 0, 0, 60, 85); //參數可自定義
var dataURL = canvas.toDataURL("image/" + ext);
callback.call(this, dataURL); //回掉函數擷取Base64編碼
canvas = null;
};
}
//使用：
getUrlBase64("img/aaa.jpg", 'jpg', function (base64) {
console.log(base64);//base64編碼值
document.getElementById("img").src = base64;
});
</script>
</body>
</html>
![怎樣使用SpringMVC控制頁面[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)