怎么把图转成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....
然后调用：
-
Base64 在CSS中的使用
.demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."); } -
Base64 在HTML中的使用
<img width="40" height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />`
好处：
data格式的Url最直接的好处是，这些Url原本会引起一个新的网络访问，因为那里是一个网页的地址，
现在不会有新的网络访问了，因为现在这里是网页的内容。这样做，会减少服务器的负载，
当然同时也增加了当前网页的大小。所以对“小”数据特别有好处。data类型Url的形式
既然是Url，当然也可以直接在浏览器的地址栏中输入。
我们把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求。坏处呢，就是浏览器不会缓存这种图像。
-
如果你用的是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
根据这些信息就可以知道是用什么方式编码的什么格式的文件了
-
目前，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 字符，
