js base64文件的处理 base64类型的资源数据 Data URI scheme

FakeOccupational

已于 2022-06-04 10:51:47 修改

阅读量993

点赞数

分类专栏：服务化&架构文章标签： js

于 2022-05-04 13:59:26 首次发布

本文链接：https://blog.csdn.net/ResumeProject/article/details/124569605

版权

服务化&架构专栏收录该内容

87 篇文章 0 订阅

订阅专栏

许多网站可能有图片，当查看源代码时发现：

代码为：

<!--  一张×号图片：-->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMjAvMTIGkKG+AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAB1JREFUCJljONjA8LiBoZyBwY6BQQZMAtlAkYMNAF1fBs/zPvcnAAAAAElFTkSuQmCC" />

这是把图像文件的内容直接写在了HTML 文件中，这样作的好处是，节省了一个HTTP 请求。坏处是浏览器不会缓存这种图像。

可以使用在线的转化工具进行尝试：

转换工具： https://www.css-js.com/tools/base64.html ，https://www.zhangxinxu.com/sp/base64.html

除了图片还可以其他文件

标志	格式
data:	文本数据
data:text/plain	文本数据
data:text/html	HTML代码
data:text/html;base64	base64编码的HTML代码
data:text/css	CSS代码
data:text/css;base64	base64编码的CSS代码
data:text/javascript	Javascript代码
data:text/javascript;base64	base64编码的Javascript代码
data:image/gif;base64	base64编码的gif图片数据
data:image/png;base64	base64编码的png图片数据
data:image/jpeg;base64	base64编码的jpeg图片数据
data:image/x-icon;base64	base64编码的icon图片数据

尝试将图片嵌入到代码中

以下方法均会报错 Access CORS，对于情况2可设置本地服务器

以file://协议方案开头的本地文件 URL（如file:///D:/Work/……/test.html）从 Web 浏览器打开 Html 文件时，它会显示错误消息Access CORS 策略已阻止从原点“null”到……的脚本

<div align="center"><img src="conv.txt " /></div>

使用xhr.open('GET', name, true);

# https://www.cnblogs.com/xingfeng-cool/articles/14715522.html
function load(name) {
    let xhr = new XMLHttpRequest(),
        okStatus = document.location.protocol === "file:" ? 0 : 200;
    xhr.open('GET', name, false);
    xhr.overrideMimeType("text/html;charset=utf-8");//默认为utf-8
    xhr.send(null);
    return xhr.status === okStatus ? xhr.responseText : null;
}
 
let text = load("文件名.txt")
console.log(text);

或者将数据嵌入到js脚本中返回再显示

function load(name) {
    let txt = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMjAvMTIGkKG+AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAB1JREFUCJljONjA8LiBoZyBwY6BQQZMAtlAkYMNAF1fBs/zPvcnAAAAAElFTkSuQmCC";
    return txt;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="test.js"></script>
    <script>
        let = load("")
        console.log(let)
        document.write("<img src='"+let+"' />");
    </script>
</head>
<body>
    
</body>
</html>

        <img id="test" src='' />
通过属性设置：
        var pic = document.getElementById('test')
        test.src = let ;

使用Jquery实现编码

https://github.com/beatgammit/base64-js

<script src="base64js.min.js"></script>

有关于base64图像的压缩问题

FakeOccupational

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js base64文件的处理 base64类型的资源数据 Data URI scheme

许多网站可能有图片，当查看源代码时发现：代码为：<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMjA
复制链接

扫一扫