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.... 然后调用：

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 字符，