img图片加载完成以及canvas转图片为base64编码
之前做项目有个图片转base64编码，我用的是html5的canvas进行转换的。很简单，其中涉及到一个知识点就是必须图片完全加载完成之后才能取到base64编码。
<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
<img src="sleep.jpg"/>
<button onclick="aa('eat.jpg');">惦记我</button>
<script type="text/javascript">
//创建一个canvas
var c=document.createElement("canvas");
//设置canvas宽高为图片宽高
c.width=540;c.height=258;
//将图片绘制到canvas，绘制成2D图像
var cxt=c.getContext("2d");
function aa(imgsrc){
var img=new Image();
img.src=imgsrc;
img.onload=function(){//判断图片完全加载完之后再执行的内联函数，否则得到base64编码会有错误
cxt.drawImage(img,0,0);
//得到图片的base64编码数据
var dd=c.toDataURL();
//log出图片base64数据
$('img').attr("src",dd);//img的src直接输入base64图片则直接显示
//};
}
</script>
</body>
</html>