又到周五了,这几周遇到一个让我很头疼的问题,接口文档里写着:
尼玛!看着就头疼,这写的什么呀,完全看不懂呀!
于是乎,一番百度,似乎有了点头绪,下面讲讲:
我不是来讲概念的,直接切入正题,图片的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方法应该也是可以的)
先看效果:
- 选择图片:
- <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>