1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > base64和普通字符串互转---window.btoa window.atob;图片的base64格式

base64和普通字符串互转---window.btoa window.atob;图片的base64格式

时间:2022-05-26 22:51:28

相关推荐

base64和普通字符串互转---window.btoa  window.atob;图片的base64格式

目录

一、作用

二、使用方法

一、作用

将非ASCLL码数据转换为ASCLL码数据,便于网络传输(某些系统仅支持ASCLL编码);

二、使用方法

1)测试代码:

//window.btoa("谢谢")//errorwindow.btoa(window.encodeURI("谢谢"))//'JUU4JUIwJUEyJUU4JUIwJUEy'window.atob("JUU4JUIwJUEyJUU4JUIwJUEy")//'%E8%B0%A2%E8%B0%A2'window.decodeURI(window.atob("JUU4JUIwJUEyJUU4JUIwJUEy"))//'谢谢'

2)结果

三、图片的Base64编码

1.转换过程

图片的 base64 编码就是可以将一幅图片数据编码成一串字符串,使用该字符串代替图像地址。这一串字符串相当于图片的css样式。

2.作用(优点)

1)网页上的每一个图片,都是需要消耗一个 http 请求下载而来的,图片的下载始终都要向服务器发出请求。

而base64图片可以随着 HTML 的下载同时下载到本地。

2)没有跨域问题,无需考虑缓存、文件头或者cookies问题

3.使用base64的前提

图片尺寸足够小

4.使用场景

如:需要通过重复显示小图片实现的背景图

5.将图片转为Base64的方法

1)将要获取Base64数据的图片拖入 google浏览器中

2)F12打开调试工具,选择sources菜单

3)找到刚才拖进来的图片,并点击下方的{}格式化base64数据,如图3-1所示,即可得到图片的base64数据,如图3-2所示

4)使用时加上前缀“data:image/png;base64,"即可。

注:png是图片的格式,要根据不同的图片格式修改,还可以是gif,jpg等

图 3-1操作步骤

图 3-2图片的base64数据

6.查看base64图片的方法

图片较小时,可以直接在浏览器地址栏中输入base64数据打开。如:将下面的url复制到地址栏,即可打开图片。

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

当图片过大时,不能直接在浏览器地址栏打开或只能看到部分数据,因为浏览器地址栏可输入的字符是有限的。

7.base64图片的缺点

增加了css体积,会导致CRP(Critical Rendering Path,关键渲染路径)的阻塞,影响渲染,导致用户会长时间注视空白屏幕。

CSSOM 阻止任何东西渲染,(意味着在CSS没处理好之前所有东西都不会展示),而如果CSS文件中混入了Base64,那么(因为文件体积的大幅增长)解析时间会增长到十倍以上。

所以只适合小图片的渲染。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。