原文：https://blog.csdn.net/deng_xj/article/details/93731850

data:image/png;base64应用

我们知道任何图片都可以通过base64编码（或称为Data URL），将文件变成一串字符串。data URI scheme 允许我们使用内联（inline-code）的方式在网页中包含数据，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。常用于将图片嵌入网页。由于服务器中就不需要存放图片文件了，而是可以将图片写进网页HTML文件中。可以节省大量的服务器请求。

Data URI的格式规范

data:[<mime type>][;charset=<charset>][;<encoding>],<encoded data>

1. data ：协议名称；

2. [<mime type>] ：可选项，数据类型（image/png、text/plain等）

3. [;charset=<charset>] ：可选项，源文本的字符集编码方式

4. [;<encoding>] ：数据编码方式（默认US-ASCII，BASE64两种）

5. ,<encoded data> ：编码后的数据

Data URI scheme支持的类型

- 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图片数据

base64简单地说，它把一些 8-bit 数据翻译成标准 ASCII 字符，网上有很多免费的base64 编码和解码的工具，在目前，IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。

把文字转成base64编码


>>> import base64

>>> ls_s='字符串文本'

>>> ls_t=base64.b64encode(ls_s) #转换文本内容到base64

>>> print ls_t

19a3+7SuzsSxvg==

>>> print base64.b64decode(ls_t) #解码

字符串文本

>>>
把图片内容转成base64编码
import base64

f=open(r'x:\1.jpg','rb') #二进制方式打开图文件

ls_f=base64.b64encode(f.read()) #读取文件内容，转换为base64编码

f.close()

把编码文本写入一个txt文件


fw=open(r'x:\1.txt','w') #打开一个空白文本文件，准备写入


fw.write(ls_f)


fw.flush()


fw.close()
网页的表达
<html><body><img src="data:image/jpeg;base64,这里放的是上面写入的1.txt 的内容" /></body></html>





  • 1

注意 image/jpeg 如果图片是其它类型的，这里也要修改； image/png、image/gif、image/bmp 等 data:

URI定义于IETF标准的RFC 2397 data: URI的基本使用格式如下：

data:[][;base64|charset=some_charset],

将图片文件转换为base64格式的HTML代码：
<!doctype html>

<html lang="cn">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

<input type="file" id="file">

<br>

<textarea name="" id="txt" style="position:fixed; width:100%; top:100px; left:0; right:0; bottom:0;"></textarea>

</body>

<script>

    function change_pic(img_id, file_id) {

        var img = document.getElementById(img_id);

        var file = document.getElementById(file_id);

        if (!(window.FileReader && window.File && window.FileList && window.Blob)) {

            img.alt = '您的浏览器不支持fileReader';

        }

        file.addEventListener('change', function(e) {

            var files = this.files;

            if (files.length) {

                // 对文件进行处理，下面会讲解checkFile()会做什么

                checkFile(this.files);

            }

        });

        // 图片处理

        function checkFile(files) {

            var file = files[0];

            var reader = new FileReader();

            // show表示<div id='show'></div>，用来展示图片预览的

            if (!/image\/\w+/.test(file.type)) {

                show.innerHTML = "请确保文件为图像类型";

                return false;

            }

            // onload是异步操作

            reader.onload = function(e) {

                //show.innerHTML = '<img src="'+e.target.result+'" alt="img">';

                img.value = e.target.result;

            };

            reader.readAsDataURL(file);

        }

    }

    change_pic("txt", "file");

    //调用方法，change_pic(textarea的id，文件选择iput框id);

</script>

</html>

上传至服务器后，网页开启：



检查：





显示正常。

                                </div>

data:image/png;base64应用的更多相关文章

  1. BS中的 data:image/png;base64

    举个图片的例子: 网页中一张图片可以这样显示: <img src="http://mail.163.com/images/x.png" /> 也可以这样显示: < ...

  2. data:image/png;base64

    大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJ ...

  3. 通过data:image/png;base64把图片直接写在src里

    从网上下了个源文件查看时候发现了引用图片的地址不是在本地上的,而是后面跟了一大串字符data:image/png;base64...查了一下资料分析如下: 关于用base64存储图片 网页上有些图片的 ...

  4. url(data:image/png;base64,R0**)(转)

    url(data:image/png;base64,R0**) 所谓"data"类型的Url格式,是在RFC2397中 提出的,目的对于一些"小"的数据,可以在 ...

  5. data:image/png;base64是什么

    大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJ ...

  6. html image -- data:image/png;base64

    1,  data:image/png;base64 <!DOCTYPE HTML> <html> <head> <meta http-equiv=" ...

  7. Css中路径data:image/png;base64的用法详解

    今天查看一些网站的css中发现了 background-image:url(data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAAB ...

  8. 浅析data:image/png;base64的应用

    ...我也是加一个网安交流群发现了他们的入群密码是这个 数据:图像/ PNG; BASE64,iVBORw0KGgoAAAANSUhEUgAAANwAAAAoCAIAAAAaOwPZAAAAAXNSR ...

  9. 关于 Data URI Scheme -- data:image/jpg;base64

    转载一篇大神的文章 大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqA ...

  10. data:image/png;base64 上传图像将图片转换成base64格式

    大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJ ...

随机推荐

  1. TOKEN验证防止CSRF攻击的原理

    TOKEN验证防止CSRF攻击的原理.CSRF中文名是跨站请求伪造攻击,黑客可以通过CSRF攻击来伪造我们的身份,从而进行不法的活动.比如说是以我们的身份进行转账,发送邮件等操作. 要想做到预防CSR ...

  2. 【JavaScript】JavaScript中的ActiveXObject对象

    JavaScript中ActiveXObject对象是启用并返回 Automation 对象的引用.    使用方法: newObj = new ActiveXObject( servername.t ...

  3. h5 唤起app或跳转appStore

    //唤起app通过唤端媒介(URL Scheme)   //微信浏览器自6.3.x版本起禁用了大多数Scheme跳转功能,扫一扫目前可用   // URL 的组成:   // [scheme:][// ...

  4. asp.netcore 高并发下使用HttpClient的方法

    大家都知道,使用HttpClient,在并发量不大的情况,一般没有任何问题:但是在并发量一上去,如果使用不当,会造成很严重的堵塞的情况. 解决方案如下: 一.可以参考微软官方提供的方法:https:/ ...

  5. 【GMT43智能液晶模块】例程十八：LAN_HTTP实验——网页服务器

    源代码下载链接: 链接:https://pan.baidu.com/s/1sr4a7TBPyvs18jTfCfVj8Q 提取码:jwfv 复制这段内容后打开百度网盘手机App,操作更方便哦 GMT43 ...

  6. Spring+SpringMVC+Spring Data JPA完美整合

    使用Maven实现SSS框架的整合. 方便记录,专门建了一个pom项目用来整合SSS框架所用的jar包 1.POM项目,作为父级项目,记录整个整合中的依赖jar包pom文件 <project x ...

  7. (原)关于OpenSL ES播放音频数据的一个奇怪的问题

    关于OpenSL ES播放音频数据的一个奇怪的问题 Author:lihaiping1603@aliyun.com 最近用业余时间做了一个android平台的播放器sdk,其中视频用的opengl e ...

  8. ETF:pcf文件制作

    pcf文件依赖数据: ETF基本信息() 指数权重文件(次日权重文件,中证指数公司) 现金替代标志文件(根据中证指数的停复牌文件) 净值文件(基金公司估值系统计算) 成分股数量计算公式: 1.估值系统 ...

  9. Android存储及getCacheDir()、getFilesDir()、getExternalFilesDir()、getExternalCacheDir()区别：

    存储介绍: Android系统分为内部存储和外部存储,内部存储是手机系统自带的存储,一般空间都比较小,外部存储一般是SD卡的存储,空间一般都比较大,但不一定可用或者剩余空间可能不足.一般我们存储内容都 ...

  10. 《ucore lab1 exercise5》实验报告

    资源 ucore在线实验指导书 我的ucore实验代码 题目:实现函数调用堆栈跟踪函数 我们需要在lab1中完成kdebug.c中函数print_stackframe的实现,可以通过函数print_s ...