给自己提出一个挑战。用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。
每个小程序都会给出详细的教程，保证每个新手都能看懂（不出意外的话每天都会更新）
项目地址： cwyaml/JavaScript-Programs
教程目录： JavaScript 每天一个小程序
如果喜欢的话 请给个** star** 非常感谢！！
第十天，一起来认识一下 图片的 Base64 位编码 。这有利于优化你的网页。
最后做一个小网页，实现用户上传图片，点击按钮获得该图片的 Base64 位编码的功能。
前言
图片处理在前端工作中可谓占据了很重要的一壁江山。而图片 Base64编码 可能相对一些人而言比较陌生，本文希望通过一些浅显的论述，让你知道什么是图片的 base64编码，为什么我们要用它，以及如何方便的使用它。
图片的Base64编码简介
图片的 base64编码，就是将一张图片数据编码成一串字符串，使用该字符串代替图像地址。
这样做有什么意义呢？我们知道，我们所看到的网页上的每一张图片，都是通过消耗一个 http请求 下载而来的。没错，每张图片都要请求一次，如果你的网页有非常多的图片，必定要消耗很大一部分资源。
我们就想了：要是图片的下载不用向服务器发出请求，而可以随着 HTML 的下载同时下载到本地那就太好了。而 base64 正好解决了这个问题。
Base64 长什么样子？ 这里贴出百度首页图片的编码：
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhwAAAECCAMAAAC.................wIcCDAgQAHAhwIcCDAgQAHAhwIcCDAgSDAgQAHAhwIcCDAgQAHAhwIcCDAgQAHggAHAhwIcCDAgfg1/x8Ate1CIJg9Qs4AAAAASUVORK5CYII=
怎么使用呢？
在 HTML 中的写法：
在 CSS 中的写法：
#box{
background: url(data:image/gif;base64,R0lGODlhHAAmAKIH.......) no-repeat center;
}
不得不说的是，这个技术已经过时了，因为图片经过编码后体积会变大（一张 200k 的图片编码后 大概 240K 左右）。尽管节省了 http 请求，但也带来了打开网页时拥堵的问题，有点得不偿失。所以只有很小的图片会考虑使用一下。
目前已经有新的技术来代替：CssSprites 。以后会讲。
如果你不感兴趣就不必在往下看了。。
本着折腾精神，还是研究一下。现在开始动手做一个获取图片 Base64 位编码的小网页。
首先实现图片上传及预览
1、如果仅仅是上传，我们都知道只需要一个 input 标签就可以完成。就像这样：
![]()