如何将图片转换base64格式？data:image/pngbase64又是什么？

一、我们在看代码时经常在img或css背景图片中看到： 
src=”data:image/png; 64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOus 
bgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4==”

src或 url() 中有一大串编码。它把一些 8-bit 数据翻译成标准 ASCII 字符，网上有很多免费的 64 编码和解码的工具， 后面跟的一串代码就相当于链接地址。

二、目前，Data URL scheme 支持的类型：

data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html; 64, 64编码的HTML代码
data:text/css,CSS代码
data:text/css; 64, 64编码的CSS代码
data:text/ , 代码
data:text/ ; 64, 64编码的 代码
data:image/gif; 64, 64编码的gif图片数据
data:image/png; 64, 64编码的png图片数据
data:image/jpeg; 64, 64编码的jpeg图片数据
data:image/x-icon; 64, 64编码的icon图片数据

三、js将图片转化为 64（2种方法）

利用canvas 将图片转化为 64 编码格式
var canvas = document.createElement(\"canvas\");
var ctx = canvas.getContext(\'2d\'),
   img = new Image;
   img.src=\"./vheider.jpg\";
 //  img.setAttribute(\'crossOrigin\', \'anonymous\')  // 图片跨域时有用
   img. = function(){
       canvas.height = img.height;
       canvas.width = img.width;
       ctx.drawImage(img,0,0);
       dataURL =canvas.toDataURL(\"image/jpeg\");

        $(\'#img\').attr(\'src\', dataURL);
        console.log(canvas.toDataURL(\"image/jpeg\"))

  };

注意： 这里要在服务端打开，不然浏览器可能会报 index.html:41 Uncaught SecurityError: Failed to execute \'toDataURL\' on \'HTMLCanvasElement\': Tainted canvases may not be exported. 错误

2 . 利用 html5 的 FileReader 将图片转化 64格式 
FileReader 是H5提供的一个处理文件的API， 
① 判断浏览器是否支持FileReader

if(window.FileReader){
    //处理文件
}else{
   return \"浏览器不支持FileRedaer\"
}

② FileReader 接口有四个方法：

readAsBinaryString (file) 将文件读取为二进制码 
readAsDataURL (file) 将文件读取为 DataURL 
readAsText (file,encoding) 将文件读取为文本(第二个参数是编码格式，一般默认是UTF-8) 
about 中断读取

③ FileReader还提供给了一些事件：

中断时触发
出错时触发
文件读取成功完成时触发
end 读取完成触发，无论成功或失败
start 读取开始时触发
onprogress 读取中
注意：重点内容 
FileReader 读取后的文件不会返回给FileReader 本身， 而是存储在了 result 中

HTML

<input type=\"file\" id=\"file\"  multiple=\"multiple\">
<div id=\"imgDiv\"></div>       

var result = document.getElementById(\"result\");  
var file = document.getElementById(\"file\");
file.change=function(){
    var file = file.files[0]
    var reader=new FileReader();  

    reader.readAsBinaryString(file);  
    reader. =function (e){  
        imgDiv.innerHTML=\'<img src=\"\'+this.result+\'\" alt=\"\"/>\'  
        console.log(this) // 打印出转换后的 file 文件对象
    }  
}