本文来自 http://www.cnblogs.com/taxi/p/7717486.html
完全复制粘贴，就为了以后能快速的找到地方抄代码，这一块也是属于我经常忘掉的一块。
方法一:canvas
<script type="text/javascript"> function getBase64Image(img) { var canvas = document.createElement("canvas"); 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/png"); return dataURL // return dataURL.replace("data:image/png;base64,", ""); } function main() { var img = document.createElement('img'); img.src = './images/Game of Thrones.jpg'; //此处自己替换本地图片的地址 img.onload =function() { var data = getBase64Image(img); var img1 = document.createElement('img'); img1.src = data; document.body.appendChild(img1); console.log(data); } } main() </script>
方法二:FileReader (推崇这种)
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>通过filereader接口读取文件</title> <script type="text/javascript"> function readAsDataURL() { if(typeof FileReader=='undifined') //判断浏览器是否支持filereader { result.innerHTML="<p>抱歉，你的浏览器不支持 FileReader</p>"; return false; } var file=document.getElementById("imagefile").files[0]; if(!/image/w+/.test(file.type)) //判断获取的是否为图片文件 { alert("请确保文件为图像文件"); return false; } var reader=new FileReader(); reader.readAsDataURL(file); reader.onload=function(e) { var result=document.getElementById("result"); result.innerHTML='<img src="'+this.result+'" alt=""/>' } } </script> </head> <body> <p> <label>请选择一个文件：</label> <input type="file" id="imagefile" /> <input type="button" value="读取图像" onClick="readAsDataURL();" /> </p> <div name="result" id="result"> <!-- 这里用来显示图片结果--> </div> </body> </html>