base64编码的使用与解析

base64将图片信息编码成一串编码字符串，用字符串代替图片地址使用

base64的好处：

1、图片使用地址会增加http请求、base64则省去了http的请求，会随着html下载到本地
2、无跨域问题缓存问题、但是也一般适合用于小图
图片转化为base64

base42坏处

长时间白屏
使用 Base64 的好处是能够减少一个图片的 HTTP 请求，然而，与之同时付出的代价则是 CSS 文件体积的增大。
而 CSS 文件体积的增大意味着什么呢？意味着 CRP 的阻塞。当浏览器从服务器接收到一个HTML页面的请求时，
到屏幕上渲染出来要经过很多个步骤。浏览器完成这一系列的运行，或者说渲染出来我们常常称之为“关键渲染路径”
也就是CPR

base64编码解析成图片

直接将编码复制到谷歌浏览器回车

data:image/jpg;base64,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

使用方法

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

<img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=">

base64编码的使用与解析相关推荐

c++ 解析从浏览器端传过来的图像base64编码，并转换成opencv识别的格式
from: c++ 解析从浏览器端传过来的图像base64编码,并转换成opencv识别的格式 #include <cstdint> #include <fstream> #i ...
JAVA解析html文档，替换img图片路径成base64编码，并将文章存入数据库
转载自 JAVA解析html文档,替换img图片路径成base64编码,并将文章存入数据库开发环境:struts2+ spring + hibernate 数据库:oracle 需求:在HTML编 ...
java中base64编码加密和android中base64编码加密不一样？base64编码解析错误？
在android的base64加密后得到: WwogIHsKICAgICJ0MSI6ICIwIiwKICAgICJ0MiI6ICIyNDM4NCIsCiAgICAidDMiOiAiIiwKICAgIC ...
【数据结构与算法】之深入解析Base64编码的实现原理
一.Base64 编码简介 ① Base64 编码的由来为什么会有 Base64 编码呢?因为有些网络传送渠道并不支持所有的字节,例如传统的邮件只支持可见字符的传送,像 ASCII 码的控制字符就不 ...
Base64编码解析以及加密、解密实现
一.编码规则 Base64编码的思想是是采用64个基本的ASCII码字符对数据进行重新编码.它将需要编码的数据拆分成字节数组.以3个字节为一组.按顺序排列24位数据,再把这24位数据分成4组,即每组6 ...
Java解析Base64编码为图片
创建工具类在转换前需要对base64编码进行处理,把头部信息去掉,根据不同的图片格式而不同 data:image/png;base64为png格式的图片.其他格式的base64编码需要进行相对应的改 ...
Base64编码的字符串与图片的互转
用Flex写了一个例子,图片(暂时仅支持png.jpg/jpeg)转成base64编码的字符串(默认取上传文件的后缀名,然后添加了"data:image/(png|gif|jpg|jpeg) ...
base64编码的作用【转】
转自:https://www.zhihu.com/question/36306744/answer/71626823 X.509公钥证书也好,电子邮件数据也好,经常要用到Base64编码,那么为什么要 ...
JAVA 将图片转换为Base64编码
https://www.cnblogs.com/ywlx/p/4544179.html 这里使用的jar包是commons-codec-1.10.jar; import java.io.FileInp ...