个人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=)