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

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

二、目前，Data URL 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图片数据

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

利用canvas 将图片转化为base64 编码格式
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d'),
img = new Image;
img.src="./vheider.jpg";
//  img.setAttribute('crossOrigin', 'anonymous')  // 图片跨域时有用
img.onload = 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 将图片转化base64格式
FileReader 是H5提供的一个处理文件的API，
① 判断浏览器是否支持FileReader

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

② FileReader 接口有四个方法：

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

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

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

<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.οnlοad=function (e){
imgDiv.innerHTML='<img src="'+this.result+'" alt=""/>'
console.log(this) // 打印出转换后的 file 文件对象
}
}

一、我们在看代码时经常在img或css背景图片中看到： src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOus bgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4==”src或 url() 中有一大串编码。它把一些 8-bit 数据翻译成标准 ASCII 字符，网上有很多... require 'path/to/class/b64img.php' ; // encode file as data uri $ image 1 = new B64img ( './some_ image . png ' ); $ data _URI = $ image 1 -> get_ data (); // save data uri as file $ image 2 = new B64img ( $ data _URI ); $ image 2 -> save_as ( './new_ image . png ' ); 埃斯特拉图拉 ### ADS-4（ANALISE E DESENVOLVIMENTO DE SISTEMAS） ---------------------------------------------------------------- DW - desenvolvimento de sistemas para web - francisco calaça DD - desenvolvimento de sistemas distribuidos - edjalma TS - teste de software PS - projeto de so ​ 谷歌开发的专门用来表示网页 图片 的 格式 ，兼具所有优点，占内存小，但兼容性不好 base64 ： ​ 将 图片 编码加载网页的时候直接查看，与网页同时加载，但是会拖慢网页加载速度。与其他的 转换 可以百度 转换 器 选择方式：效果一样用小的，效果