Base64编码 及 在HTML中用Base编码直接显示图片或嵌入其他文件类型

本文主要是介绍Base64编码 及 在HTML中用Base编码直接显示图片或嵌入其他文件类型,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.为什么要用到BASE64编码的图片信息 
    Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一。Base64 主要不是加密,它主要的用途是把一些二进制数转成普通字符用于网络传输。由于一些二进制字符在传输协议中属于控制字符,不能直接传送需要转换一下。最常见的用途是作为电子邮件或WebService附件的传输编码. 
2.base64编码定义 
  目前的internet e-mail标准--简单邮件传递协议(smtp)在rfc821中规定了两条重要但不难实现的限制: 
        1)邮件的内容必须全部为7-比特的美国ascii码。 
        2)每一行的长度不能超过1000的字符。 
    因此为了通过smtp用e-mail进行传送,内存的序列化对象必须转化为和以上相容的格式。 
    rfc1521提供了一个可行的方案。它定义了邮件的内容部分,使之能包涵多种形式的数据。这种标准就是目前众所周知的mime。 
  按照rfc1521编码过程为:输入是24个比特,输出是4个字节。24个比特输入组从左至右 由3个8比特的输入组形成。这24个比特被看成4个连续的6比特组,而每个6比特输入组被翻译为base64码表中的一个数字。依次反复不断进行,直到全部输入数据转换完成。 
    如果最后剩下两个输入数据,在编码结果后加1个“=”;如果最后剩下一个输入数据,编码结果后加2个“=”;如果没有剩下任何数据,就什么都不要加,这样才可以保证资料还原的正确性。 
    完整的base64定义可见 RFC1421和 RFC2045。编码后的数据比原始数据略长,为原来的4/3。在电子邮件中,根据RFC822规定,每76个字符,还需要加上一个回车换行。可以估算编码后数据长度大约为原长的135.1%。 



3.如何进行base64编码 
   Base64 使用US-ASCII子集的65个字符, 每个字符用6位表示 
   对于文本串,编码过程如下。例如"men": 
   先转成US-ASCII值. 

   "m"十进制 109 
   "e"十进制 101 
   "n"十进制 110 
   二进制 : 
   m 01101101 
   e 01100101 
   n 01101110 

   三个8位连起来是24位 
   011011010110010101101110 

   然后分成4个6位 
   011011 010110 010101 101110 

   现在得到4个值,十进制为 
   27 22 21 46 

对应的 Base64 字符是 : b W V u 
编码总是基于3个字符,从而产生4个Base64字符。 

如果只是2个字符的数据,使用特殊字符"="补齐Base64的4字。 
如,编码"me" 
01101101 01100101 
0110110101100101 
011011 010110 0101 
111111 (与,补足6位) 
011011 010110 010100 
b W U 
b W U = ("=" 补足4字符) 
于是 "bWU=" 就是"me"的Base64值. 

如果只是2个字符的数据,如编码 "m" 
01101101 
011011 01 
111111 
011011 010000 
b Q = = 
于是 "bQ==" 就是"m"的Base64值. 



4.显示被存储为Base64编码字符串的图片的例子 
1)使用data: URI直接在网页中嵌入. 
data: URI定义于IETF标准的RFC 2397 
data: URI的基本使用格式如下: 
data:[<MIME-type>][;base64|charset=some_charset],<data> 
mime-type是嵌入数据的mime类型,比如png图片就是image/png。 
如果后面跟base64,说明后面的data是采用base64方式进行编码的

这种方法可以将任何文件嵌入到你的网页中,如HTM/HTML,主要代码:'data:text/html;base64,+你的编码'

下面给出MIME-Type 列表(文件类型参照):
123 application/vnd.lotus-1-2-3 
3gp video/3gpp 
aab application/x-authoware-bin 
aam application/x-authoware-map 
aas application/x-authoware-seg 
ai application/postscript 
aif audio/x-aiff 
aifc audio/x-aiff 
aiff audio/x-aiff 
als audio/X-Alpha5 
amc application/x-mpeg 
ani application/octet-stream 
asc text/plain 
asd application/astound 
asf video/x-ms-asf 
asn application/astound 
asp application/x-asap 
asx video/x-ms-asf 
au audio/basic 
avb application/octet-stream 
avi video/x-msvideo 
awb audio/amr-wb 
bcpio application/x-bcpio 
bin application/octet-stream 
bld application/bld 
bld2 application/bld2 
bmp application/x-MS-bmp 
bpk application/octet-stream 
bz2 application/x-bzip2 
cal image/x-cals 
ccn application/x-cnc 
cco application/x-cocoa 
cdf application/x-netcdf 
cgi magnus-internal/cgi 
chat application/x-chat 
class application/octet-stream 
clp application/x-msclip 
cmx application/x-cmx 
co application/x-cult3d-object 
cod image/cis-cod 
cpio application/x-cpio 
cpt application/mac-compactpro 
crd application/x-mscardfile 
csh application/x-csh 
csm chemical/x-csml 
csml chemical/x-csml 
css text/css 
cur application/octet-stream 
dcm x-lml/x-evm 
dcr application/x-director 
dcx image/x-dcx 
dhtml text/html 
dir application/x-director 
dll application/octet-stream 
dmg application/octet-stream 
dms application/octet-stream 
doc application/msword 
dot application/x-dot 
dvi application/x-dvi 
dwf drawing/x-dwf 
dwg application/x-autocad 
dxf application/x-autocad 
dxr application/x-director 
ebk application/x-expandedbook 
emb chemical/x-embl-dl-nucleotide 
embl chemical/x-embl-dl-nucleotide 
eps application/postscript 
eri image/x-eri 
es audio/echospeech 
esl audio/echospeech 
etc application/x-earthtime 
etx text/x-setext 
evm x-lml/x-evm 
evy application/x-envoy 
exe application/octet-stream 
fh4 image/x-freehand 
fh5 image/x-freehand 
fhc image/x-freehand 
fif image/fif 
fm application/x-maker 
fpx image/x-fpx 
fvi video/isivideo 
gau chemical/x-gaussian-input 
gca application/x-gca-compressed 
gdb x-lml/x-gdb 
gif image/gif 
gps application/x-gps 
gtar application/x-gtar 
gz application/x-gzip 
hdf application/x-hdf 
hdm text/x-hdml 
hdml text/x-hdml 
hlp application/winhlp 
hqx application/mac-binhex40 
htm text/html 
html text/html 
hts text/html 
ice x-conference/x-cooltalk 
ico application/octet-stream 
ief image/ief 
ifm image/gif 
ifs image/ifs 
imy audio/melody 
ins application/x-NET-Install 
ips application/x-ipscript 
ipx application/x-ipix 
it audio/x-mod 
itz audio/x-mod 
ivr i-world/i-vrml 
j2k image/j2k 
jad text/vnd.sun.j2me.app-descriptor 
jam application/x-jam 
jar application/java-archive 
jnlp application/x-java-jnlp-file 
jpe image/jpeg 
jpeg image/jpeg 
jpg image/jpeg 
jpz image/jpeg 
js application/x-javascript 
jwc application/jwc 
kjx application/x-kjx 
lak x-lml/x-lak 
latex application/x-latex 
lcc application/fastman 
lcl application/x-digitalloca 
lcr application/x-digitalloca 
lgh application/lgh 
lha application/octet-stream 
lml x-lml/x-lml 
lmlpack x-lml/x-lmlpack 
lsf video/x-ms-asf 
lsx video/x-ms-asf 
lzh application/x-lzh 
m13 application/x-msmediaview 
m14 application/x-msmediaview 
m15 audio/x-mod 
m3u audio/x-mpegurl 
m3url audio/x-mpegurl 
ma1 audio/ma1 
ma2 audio/ma2 
ma3 audio/ma3 
ma5 audio/ma5 
man application/x-troff-man 
map magnus-internal/imagemap 
mbd application/mbedlet 
mct application/x-mascot 
mdb application/x-msaccess 
mdz audio/x-mod 
me application/x-troff-me 
mel text/x-vmel 
mi application/x-mif 
mid audio/midi 
midi audio/midi 
mif application/x-mif 
mil image/x-cals 
mio audio/x-mio 
mmf application/x-skt-lbs 
mng video/x-mng 
mny application/x-msmoney 
moc application/x-mocha 
mocha application/x-mocha 
mod audio/x-mod 
mof application/x-yumekara 
mol chemical/x-mdl-molfile 
mop chemical/x-mopac-input 
mov video/quicktime 
movie video/x-sgi-movie 
mp2 audio/x-mpeg 
mp3 audio/x-mpeg 
mp4 video/mp4 
mpc application/vnd.mpohun.certificate 
mpe video/mpeg 
mpeg video/mpeg 
mpg video/mpeg 
mpg4 video/mp4 
mpga audio/mpeg 
mpn application/vnd.mophun.application 
mpp application/vnd.ms-project 
mps application/x-mapserver 
mrl text/x-mrml 
mrm application/x-mrm 
ms application/x-troff-ms 
mts application/metastream 
mtx application/metastream 
mtz application/metastream 
mzv application/metastream 
nar application/zip 
nbmp image/nbmp 
nc application/x-netcdf 
ndb x-lml/x-ndb 
ndwn application/ndwn 
nif application/x-nif 
nmz application/x-scream 
nokia-op-logo image/vnd.nok-oplogo-color 
npx application/x-netfpx 
nsnd audio/nsnd 
nva application/x-neva1 
oda application/oda 
oom application/x-AtlasMate-Plugin 
pac audio/x-pac 
pae audio/x-epac 
pan application/x-pan 
pbm image/x-portable-bitmap 
pcx image/x-pcx 
pda image/x-pda 
pdb chemical/x-pdb 
pdf application/pdf 
pfr application/font-tdpfr 
pgm image/x-portable-graymap 
pict image/x-pict 
pm application/x-perl 
pmd application/x-pmd 
png image/png 
pnm image/x-portable-anymap 
pnz image/png 
pot application/vnd.ms-powerpoint 
ppm image/x-portable-pixmap 
pps application/vnd.ms-powerpoint 
ppt application/vnd.ms-powerpoint 
pqf application/x-cprplayer 
pqi application/cprplayer 
prc application/x-prc 
proxy application/x-ns-proxy-autoconfig 
ps application/postscript 
ptlk application/listenup 
pub application/x-mspublisher 
pvx video/x-pv-pvx 
qcp audio/vnd.qcelp 
qt video/quicktime 
qti image/x-quicktime 
qtif image/x-quicktime 
r3t text/vnd.rn-realtext3d 
ra audio/x-pn-realaudio 
ram audio/x-pn-realaudio 
rar application/x-rar-compressed 
ras image/x-cmu-raster 
rdf application/rdf+xml 
rf image/vnd.rn-realflash 
rgb image/x-rgb 
rlf application/x-richlink 
rm audio/x-pn-realaudio 
rmf audio/x-rmf 
rmm audio/x-pn-realaudio 
rmvb audio/x-pn-realaudio 
rnx application/vnd.rn-realplayer 
roff application/x-troff 
rp image/vnd.rn-realpix 
rpm audio/x-pn-realaudio-plugin 
rt text/vnd.rn-realtext 
rte x-lml/x-gps 
rtf application/rtf 
rtg application/metastream 
rtx text/richtext 
rv video/vnd.rn-realvideo 
rwc application/x-rogerwilco 
s3m audio/x-mod 
s3z audio/x-mod 
sca application/x-supercard 
scd application/x-msschedule 
sdf application/e-score 
sea application/x-stuffit 
sgm text/x-sgml 
sgml text/x-sgml 
sh application/x-sh 
shar application/x-shar 
shtml magnus-internal/parsed-html 
shw application/presentations 
si6 image/si6 
si7 image/vnd.stiwap.sis 
si9 image/vnd.lgtwap.sis 
sis application/vnd.symbian.install 
sit application/x-stuffit 
skd application/x-Koan 
skm application/x-Koan 
skp application/x-Koan 
skt application/x-Koan 
slc application/x-salsa 
smd audio/x-smd 
smi application/smil 
smil application/smil 
smp application/studiom 
smz audio/x-smd 
snd audio/basic 
spc text/x-speech 
spl application/futuresplash 
spr application/x-sprite 
sprite application/x-sprite 
spt application/x-spt 
src application/x-wais-source 
stk application/hyperstudio 
stm audio/x-mod 
sv4cpio application/x-sv4cpio 
sv4crc application/x-sv4crc 
svf image/vnd 
svg image/svg-xml 
svh image/svh 
svr x-world/x-svr 
swf application/x-shockwave-flash 
swfl application/x-shockwave-flash 
t application/x-troff 
tad application/octet-stream 
talk text/x-speech 
tar application/x-tar 
taz application/x-tar 
tbp application/x-timbuktu 
tbt application/x-timbuktu 
tcl application/x-tcl 
tex application/x-tex 
texi application/x-texinfo 
texinfo application/x-texinfo 
tgz application/x-tar 
thm application/vnd.eri.thm 
tif image/tiff 
tiff image/tiff 
tki application/x-tkined 
tkined application/x-tkined 
toc application/toc 
toy image/toy 
tr application/x-troff 
trk x-lml/x-gps 
trm application/x-msterminal 
tsi audio/tsplayer 
tsp application/dsptype 
tsv text/tab-separated-values 
tsv text/tab-separated-values 
ttf application/octet-stream 
ttz application/t-time 
txt text/plain 
ult audio/x-mod 
ustar application/x-ustar 
uu application/x-uuencode 
uue application/x-uuencode 
vcd application/x-cdlink 
vcf text/x-vcard 
vdo video/vdo 
vib audio/vib 
viv video/vivo 
vivo video/vivo 
vmd application/vocaltec-media-desc 
vmf application/vocaltec-media-file 
vmi application/x-dreamcast-vms-info 
vms application/x-dreamcast-vms 
vox audio/voxware 
vqe audio/x-twinvq-plugin 
vqf audio/x-twinvq 
vql audio/x-twinvq 
vre x-world/x-vream 
vrml x-world/x-vrml 
vrt x-world/x-vrt 
vrw x-world/x-vream 
vts workbook/formulaone 
wav audio/x-wav 
wax audio/x-ms-wax 
wbmp image/vnd.wap.wbmp 
web application/vnd.xara 
wi image/wavelet 
wis application/x-InstallShield 
wm video/x-ms-wm 
wma audio/x-ms-wma 
wmd application/x-ms-wmd 
wmf application/x-msmetafile 
wml text/vnd.wap.wml 
wmlc application/vnd.wap.wmlc 
wmls text/vnd.wap.wmlscript 
wmlsc application/vnd.wap.wmlscriptc 
wmlscript text/vnd.wap.wmlscript 
wmv audio/x-ms-wmv 
wmx video/x-ms-wmx 
wmz application/x-ms-wmz 
wpng image/x-up-wpng 
wpt x-lml/x-gps 
wri application/x-mswrite 
wrl x-world/x-vrml 
wrz x-world/x-vrml 
ws text/vnd.wap.wmlscript 
wsc application/vnd.wap.wmlscriptc 
wv video/wavelet 
wvx video/x-ms-wvx 
wxl application/x-wxl 
x-gzip application/x-gzip 
xar application/vnd.xara 
xbm image/x-xbitmap 
xdm application/x-xdma 
xdma application/x-xdma 
xdw application/vnd.fujixerox.docuworks 
xht application/xhtml+xml 
xhtm application/xhtml+xml 
xhtml application/xhtml+xml 
xla application/vnd.ms-excel 
xlc application/vnd.ms-excel 
xll application/x-excel 
xlm application/vnd.ms-excel 
xls application/vnd.ms-excel 
xlt application/vnd.ms-excel 
xlw application/vnd.ms-excel 
xm audio/x-mod 
xml text/xml 
xmz audio/x-mod 
xpi application/x-xpinstall 
xpm image/x-xpixmap 
xsit text/xml 
xsl text/xml 
xul text/xul 
xwd image/x-xwindowdump 
xyz chemical/x-pdb 
yz1 application/x-yz1 
z application/x-compress 
zac application/x-zaurus-zac 
zip application/zip

这篇关于Base64编码 及 在HTML中用Base编码直接显示图片或嵌入其他文件类型的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1145291

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

第10章 中断和动态时钟显示

第10章 中断和动态时钟显示 从本章开始,按照书籍的划分,第10章开始就进入保护模式(Protected Mode)部分了,感觉从这里开始难度突然就增加了。 书中介绍了为什么有中断(Interrupt)的设计,中断的几种方式:外部硬件中断、内部中断和软中断。通过中断做了一个会走的时钟和屏幕上输入字符的程序。 我自己理解中断的一些作用: 为了更好的利用处理器的性能。协同快速和慢速设备一起工作

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

安卓链接正常显示,ios#符被转义%23导致链接访问404

原因分析: url中含有特殊字符 中文未编码 都有可能导致URL转换失败,所以需要对url编码处理  如下: guard let allowUrl = webUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) else {return} 后面发现当url中有#号时,会被误伤转义为%23,导致链接无法访问

C#实战|大乐透选号器[6]:实现实时显示已选择的红蓝球数量

哈喽,你好啊,我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记,这是第6篇; 接下来实现实时显示当前选中红球数量,蓝球数量; 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时,在对应的位置显示实时已选择的红球、蓝球的数量; 02 标签名称 分别设置Label标签名称为:lblRedCount、lblBlueCount

【生成模型系列(初级)】嵌入(Embedding)方程——自然语言处理的数学灵魂【通俗理解】

【通俗理解】嵌入(Embedding)方程——自然语言处理的数学灵魂 关键词提炼 #嵌入方程 #自然语言处理 #词向量 #机器学习 #神经网络 #向量空间模型 #Siri #Google翻译 #AlexNet 第一节:嵌入方程的类比与核心概念【尽可能通俗】 嵌入方程可以被看作是自然语言处理中的“翻译机”,它将文本中的单词或短语转换成计算机能够理解的数学形式,即向量。 正如翻译机将一种语言

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能