base64图片转码

怎么把图转成base64？

• 方法一：

  new fileReader().readAsDataURL(file)
  

• 方法二：

  var imgCanvas=document.createElement('canvas');
       mgContext=imgCanvas.getContext('2d');
  var imgAsDataURL=imgCanvas.toDataURL("image/jpeg");
  

缺点
就是任何图片都被png了
编码出来的字符串大小可能要比原图编码出来的要大

demo 可以在控制台运行

 var file = document.createElement('input');
 file.type = 'file';
 document.body.appendChild(file);
 file.onchange=function(){
        var reader=new FileReader()
        reader.onload = function ( event ) {console.log(event.target.result);};
        reader.readAsDataURL(file.files[0]);
 }

结果
data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL....
然后调用：

1. Base64 在CSS中的使用

    .demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."); }
   

2. Base64 在HTML中的使用

    `
   

好处：

1. data格式的Url最直接的好处是，这些Url原本会引起一个新的网络访问，因为那里是一个网页的地址，
   现在不会有新的网络访问了，因为现在这里是网页的内容。这样做，会减少服务器的负载，
   当然同时也增加了当前网页的大小。所以对“小”数据特别有好处。

2. data类型Url的形式
   既然是Url，当然也可以直接在浏览器的地址栏中输入。
   我们把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求。

3. 坏处呢，就是浏览器不会缓存这种图像。

4. 如果你用的是IE8，如果你想编码图片，更简单的方法是，自己写一个HTML网页，把本地图片放进去，然后用IE8打开该网页，然后保存为mht文件，然后用记事本打开mht文件，你就会看
   到图片以及被编码过了，直接拷贝之，粘贴之，加上data:image/jpeg;base64,等前缀，搞定之。
   在mht文件中，每一个NextPart下面都会有类似下面的几行说明字段：

   Content-Type: image/jpeg Content-Transfer-Encoding: base64 
   Content-Location: file:///E:/cat2.jpg 
   

根据这些信息就可以知道是用什么方式编码的什么格式的文件了

5. 目前，Data URI scheme支持的类型有：

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

base64简单地说，它把一些 8-bit 数据翻译成标准 ASCII 字符，