在HTML 5中支持Base64编码
1. btoa方法与atob方法
在HTML 5中，新增btoa方法与atob方法来支持Base64编码。在这两个方法的命名中，“b”可以被理解为一串二进制数据，“a”可以被理解为一个ASCII码字符串，其中btoa方法的使用方法如下所示：
var result=window.btoa(data)
该方法用于将一串字符串进行Base64编码处理，该方法使用一个参数。参数值为一串由二进制数据组成的Unicode字符串（字符串中每一个字符的范围为从U+0000到U+00FF），该方法返回编码后的Base64格式的字符串。
atob方法的使用方法如下所示：
var result=window.atob(data)
该方法用于将一串经过Base64编码后的Base64格式的字符串进行解码处理，该方法使用一个参数，参数值为一串经过Base64编码后的字符串，方法返回经过解码后的一串由二进制数据组成的Unicode字符串（字符串中每一个字符的范围为从U+0000到U+00FF）。
在这两个方法中，如果由于参数值不符合指定格式而导致编码或解码处理失败，浏览器均抛出InvalidCharacterError异常。
到目前为止，Firefox 3以上、Chrome 6以上、Safari 5、Opera 10.50以上、IE 10版本的浏览器对这两个方法提供支持。
2. btoa方法使用示例
该示例页面中具有一个文件选取控件（type为file的input元素），当用户使用该控件选取一幅图片文件并单击页面上的“读取图像”按钮后，脚本代码中使用FileReader对象的readAsBinaryString方法读取该图片文件的二进制数据，然后将其编码为Base64格式的字符串，然后将页面上img元素的src属性值（用于指定img元素中显示图片的图片来源）指定为“data：”+用户选取图片文件的type属性值+“；base64，”+编码后的Base64格式的字符串，使img元素中显示用户选取图片。虽然通过在脚本代码中使用FileReader对象的readAsDataURL方法直接将图片文件读取为一个URL地址，然后直接将该URL地址指定为img元素的src属性值的方法可以完成同样功能，但是当服务器端数据库中直接保存了图片文件的二进制数据及图片文件的格式（或应用程序中统一指定使用的图片文件的格式）时，本示例程序将会变得非常有用。
使用File控件选取一幅图片文件并单击“读取图像”按钮后，页面中显示该图片文件
<p>
<label>请选择一个文件：</label>
<input type="file" id="file" onchange="file_onchange()" name="">
<input type="button" id="btnReadPicture" value="读取图像" onclick="readPicture()" disabled="disabled" name="">
</p>
<div id="result">
<!-- 这里用来显示读取结果 -->
</div>
var result = document.getElementById('result');
var file = document.getElementById('file');
if(typeof FileReader == 'undefined'){
result.innerHTML = '<p>抱歉，你的浏览器不支持FileReader</p>';
file.setAttribute('disabled','disabled')
}
function file_onchange(){
document.getElementById('btnReadPicture').disabled = false;
}
function readPicture(){
// 检查是否为图像文件
var file = document.getElementById('file').files[0];
if(!/image\/\w+/.test(file.type)){
alert('请确保文件为图像类型');
return false;
}
var reader = new FileReader();
// 将文件以二进制形式进行读入页面
reader.readAsBinaryString(file);
reader.onload = function(f){
var result = document.getElementById('result');
var src = "data:"+file.type+";base64,"+window.btoa(this.result);
result.innerHTML = '<img src="'+src+'" />'
}
}
3. atob方法使用示例
在示例中，我们显示一个canvas元素与一个“上传图片”按钮，在页面打开时在canvas元素中绘制一幅图片，当用户单击“上传图片”按钮时首先通过canvas元素的toDataURL方法获取该图片的URL地址，然后获取该URL地址中的Base64格式的字符串，然后使用atob方法将其解码为一串二进制数据，然后将该二进制数据提交到服务器端，在服务器端将这串二进制数据保存为图片文件。
<body onload="draw('canvas')">
<input type="button" value="上传图片" onclick="imgSave()" name=""> <br>
<canvas id="canvas" width="400" height="300"></canvas>
var canvas;
function draw(id){
canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.fillStyle = "rgb(0,0,255)";
context.fillRect(0,0,canvas.width,canvas.height);
context.fillStyle = "rgb(255,255,0)";
context.fillRect(10,20,50,50);
}
function imgSave(){
var data = canvas.toDataURL("image/jpg");
data = data.replace("data:image/jpg;base64,","");
var xhr = new XMLHttpRequest();
xhr.open("POST","uploadImage.php");
xhr.sendAsBinary(window.atob(data));
}
uploadImage.php脚本文件中的代码
<?php
$data= $GLOBALS['HTTP_RAW_POST_DATA'];
$file=fopen("test.jpg","w");
fwrite($file,$data);
fclose($file);
?>
