网页上的base64码太长？科普base64到底是啥

一、前言

书接上回，上次是通过返回base64码给前端页面，实现了我们访问项目外图片的目的。只是代码实在是太长了，不好看啊，得想办法优化下。顺带了解下base64到底是啥，用着好不好，会不会影响速度呢？

php上传图片到非项目目录，前端页面的读取问题

二、代码逻辑优化

1、需要时再请求，不需要时不要管

既然咱们的问题是页面上的base64码太多了，那么我们换一种思维，在每次需要打开详情页的时候，请求后端，然后获取对应的base64码，赋值给图片即可。
优点：
（1）页面上不需要大量的base64码，方便维护
（2）页面代码减小，同时初始化的时候程序压力也变小，页面加载速度会变快
（3）http请求变多，但是都是选择性的请求，一次执行一个http请求就可以

缺点：
（1）http请求的速度不如base64的渲染速度，如果出现网络不佳的情况，可能会有一定的影响

优点大于缺点，最终选用该方案。在打开详情页的时候，进行网络请求，然后获取图片地址，再把图片转化为base64返回，赋值即可。具体参考上篇文章的代码，类似的方法，只是思维方向转化了下。

2、继续转化思维，页面src直接写上接口地址？

既然我们可以通过ajax请求页面返回base64码，那么我们是不是也能够直接请求接口返回图片的二进制流呢？img的src属性本职就是一种http请求，我们写上接口路由，这个路由对应的方法就是通过php读取存在项目外的图片，然后加个header头输出image即可，如果方案可行的话，那就没那么多问题了。

大致方法如下：

php代码：

 header("Content-Type: image/jpeg;text/html; charset=utf-8");$img_path = $dir.$images;$thumb = new Thumbnail(100, 100);$thumb->loadFile($img_path);$data =  $thumb->buildThumb();return $data;   //返回二进制的流

前端代码：

页面展示效果

最后发现还真的行得通，直接请求个接口地址，返回流就可以了。这里返回的结果，用file_get_contents也可以获得的，直接return即可。

三、科普下二级制的图片流和base64码的区别

1、区别

二进制的图片流： 用二进制流来表示图片，计算机的存储在物理上是都二进制的，所以文本文件与二进制文件的区别并不是物理上的，而是逻辑上的。
base64码： Base64 编码之所以称为 Base64，是因为其使用 64 个字符来对任意数据进行编码。Base64 编码本质上是一种将二进制数据转成文本数据的方案。对于非二进制数据，是先将其转换成二进制形式，然后每连续 6 比特（ 2 的 6 次方= 64 ）计算其十进制值，根据该值在上面的索引表中找到对应的字符，最终得到一个文本字符串。base64编码主要用在传输、存储、表示二进制领域，不算是加密方法，只是看不到明文而已，
大多数编码都是由字符串转化成二进制的过程，而Base64的编码则是从二进制转换为字符串。

2、根据图片地址获取base64

  public function base64EncodeImage ($image_file) {$base64_image = '';$image_info = getimagesize($image_file);$image_data = fread(fopen($image_file, 'r'), filesize($image_file));$base64_image = 'data:' . $image_info['mime'] . ';base64,' . chunk_split(base64_encode($image_data));return $base64_image;}

看完上面的解释，我们就知道的差不多了，base64只是一串字符串而已。Base64编码原理与应用

3、base64适用场景

1、跨域场景
2、只能传输字符的请求
3、网页上很多小icon，影响网页速度的
4、网页优化：
如图：页面在请求之初发生了150多个请求，每个http请求花费的时间不多，但加起来可就太多。这种小图片，转化为base64的字符也不会太长，icon一般都在公用部分，不常修改，其次是可以节省大量的网络请求。

在这里插入图片描述