一、js base64
获取到上传的文件myfile，创建一个fileRead文件对象，使用readAsDataURL方法可以将读取到的文件编码成Data URL。文件加载成功后，e.target.result就是文件图片所对应的base64编码。直接赋值给img的src，就能显示图片。
<body>
<input type="file" name="myfile" id="myfile" value="" onchange="sub()"/>
</body>
<script type="text/javascript">
function sub(){
var myfile = document.getElementById("myfile").files[0];
var fileRead = new FileReader();
fileRead.readAsDataURL(myfile);
fileRead.onload = function(e){
console.log(e);
var base64 = e.target.result;
console.log(base64);
var img = new Image();
img.src = base64;
document.getElementsByTagName("body")[0].appendChild(img);
}
}
<script>
下面是onload里e对象打印的结果，可以看出e.target.result是文件图片的信息。
打印图
下面打印的是base64的编码，可以在img的src中直接引用，或者复制到浏览器搜索框里也能直接搜索图片。
base64
运行结果图如下：
B70AB62F-9251-4C48-BCB9-364E7A8B18F6.png
二、canvas base64
使用canvas画一个填充色为红色的矩形，试点按钮后，使用canvas.toDataURL方法：返回一个包含图片展示的 data URI 。可以使用type参数其类型，默认为 PNG 格式。把得到的base64编码赋给img的src,显示图片。
<body>
<canvas id="mycanvas" width="500" height="500"></canvas>
<button onclick="sub()">点击</button>
</body>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.fillStyle = "red";
context.fillRect(100,100,100,100);
function sub(){
var base64 = canvas.toDataURL();
console.log(base64);
var img = new Image();
img.src = base64;
document.getElementsByTagName("body")[0].appendChild(img);
}
</script>
结果图如下：
1BB0DDD2A17D8A72EC3FF604E221FF48.png
两种图片的base64的方法都很实用，项目开发中可能会遇到，今天来分享给大家。
