讲讲如何将图片格式转化成base64格式的

又到周五了，这几周遇到一个让我很头疼的问题，接口文档里写着：尼玛！看着就头疼，这写的什么呀，完全看不懂呀！于是乎，一番百度，似乎有了点头绪，下面讲讲：我不是来讲概念的，直接切入正题，图片的base64编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。这样做有什么意义呢？我们知道，我们所看到的网页上的每一个图片，都是需要消耗一个http请求下载而来的（所有才有了csssprites技术的应运而生，但是csssprites有自身的局限性，下文会提到）。　　没错，不管如何，图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，而可以随着 HTML 的下载同时下载到本地那就太好了，而base64正好能解决这个问题。　　那么图片的base64编码长什么样子呢？举个栗子。www.google.com的首页搜索框右侧的搜索小图标使用的就是base64编码。我们可以看到：　　

url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center;

//在html代码img标签里的写法
<img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=">

明白了，就是将图片路径转化成base64string格式，这尼玛！！！！！，恍然大悟呀！！！！！现在明白了接口的意思，那么如何实现转换呢？答案来了：主要使用到HTML5强大的FileReader对象(大家可以尝试使用canvas的toDataURL方法应该也是可以的)先看效果：Js代码  选择图片：  <input type="file" id="img">  <br/>  <button id="start">开始转换</button>  <div>      预览：<img id="imgShow" src="" alt="">  </div>  <b>Base64数据：</b>  <textarea rows=15 cols=60 id="conte"></textarea>  <button id='cpData'>复制</button><span id="succ"></span>  <div id="len">数据长度：</div>  <script>      var img = document.getElementById('img')          , imgShow = document.getElementById('imgShow')          , conte = document.getElementById('conte')          , len = document.getElementById('len')          , start = document.getElementById('start')          , cpData = document.getElementById('cpData');        cpData.addEventListener('click', cpDataF);      start.addEventListener('click', startt);        /*转换函数*/      function startt() {          var imgFile = new FileReader();          imgFile.readAsDataURL(img.files[0]);          imgFile.onload = function () {              var imgData = this.result; //base64数据                imgShow.setAttribute('src', imgData);              conte.value = imgData;              len.innerHTML += imgData.length;          }      }        /*复制数据*/      function cpDataF() {          conte.select(); // 选择对象            var cpd=document.execCommand("Copy"); // 执行浏览器复制命令            cpd ? document.getElementById('succ').innerHTML = '复制成功' :　console.warn('复制失败');          window.setTimeout(function () {              document.getElementById('succ').innerHTML = '';          }, 1000)      }  </script>