html展示base64有长度限制,网页上的base64码太长？科普base64究竟是啥

1、前言

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

2、代码逻辑优化

一、须要时再请求，不须要时不要管html

既然我们的问题是页面上的base64码太多了，那么咱们换一种思惟，在每次须要打开详情页的时候，请求后端，而后获取对应的base64码，赋值给图片便可。

优势：

(1)页面上不须要大量的base64码，方便维护

(2)页面代码减少，同时初始化的时候程序压力也变小，页面加载速度会变快

(3)http请求变多，可是都是选择性的请求，一次执行一个http请求就能够前端

缺点：

(1)http请求的速度不如base64的渲染速度，若是出现网络不佳的状况，可能会有必定的影响web

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

二、继续转化思惟，页面src直接写上接口地址？segmentfault

既然咱们能够经过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便可。

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

一、区别

二进制的图片流： 用二进制流来表示图片，计算机的存储在物理上是都二进制的，因此文本文件与二进制文件的区别并非物理上的，而是逻辑上的。

base64码： Base64 编码之因此称为 Base64，是由于其使用 64 个字符来对任意数据进行编码。Base64 编码本质上是一种将二进制数据转成文本数据的方案。对于非二进制数据，是先将其转换成二进制形式，而后每连续 6 比特( 2 的 6 次方= 64 )计算其十进制值，根据该值在上面的索引表中找到对应的字符，最终获得一个文本字符串。base64编码主要用在传输、存储、表示二进制领域，不算是加密方法，只是看不到明文而已，

大多数编码都是由字符串转化成二进制的过程，而Base64的编码则是从二进制转换为字符串。

二、根据图片地址获取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适用场景

一、跨域场景

二、只能传输字符的请求

三、网页上不少小icon，影响网页速度的

四、网页优化：

如图：页面在请求之初发生了150多个请求，每一个http请求花费的时间很少，但加起来可就太多。这种小图片，转化为base64的字符也不会太长，icon通常都在公用部分，不常修改，其次是能够节省大量的网络请求。

注意： 使用base64注定有得有失，base64多的话照样会影响网页的加载速度。通常的css和图片资源都是能够被缓存的，但base64码并不会被缓存，因此在用的时候要注意得失吧，找一个平衡点

其实写这两篇文章，也是博主本身的一个思惟的递进。有时候确实以为本身挺笨的，第一时间想起来的永远都不是最佳方案，不断的试错试错，最后才能找到相对而言还能够的方案。加油吧，少年！

end