data:image/png;base64应用
原文：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应用的更多相关文章
- BS中的 data:image/png;base64
举个图片的例子: 网页中一张图片可以这样显示: <img src="http://mail.163.com/images/x.png" /> 也可以这样显示: < ...
- data:image/png;base64
大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJ ...
- 通过data:image/png;base64把图片直接写在src里
从网上下了个源文件查看时候发现了引用图片的地址不是在本地上的,而是后面跟了一大串字符data:image/png;base64...查了一下资料分析如下: 关于用base64存储图片 网页上有些图片的 ...
- url(data:image/png;base64,R0**)(转)
url(data:image/png;base64,R0**) 所谓"data"类型的Url格式,是在RFC2397中 提出的,目的对于一些"小"的数据,可以在 ...
- data:image/png;base64是什么
大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJ ...
- html image -- data:image/png;base64
1, data:image/png;base64 <!DOCTYPE HTML> <html> <head> <meta http-equiv=" ...
- Css中路径data:image/png;base64的用法详解
今天查看一些网站的css中发现了 background-image:url(data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAAB ...
- 浅析data:image/png;base64的应用
...我也是加一个网安交流群发现了他们的入群密码是这个 数据:图像/ PNG; BASE64,iVBORw0KGgoAAAANSUhEUgAAANwAAAAoCAIAAAAaOwPZAAAAAXNSR ...
- 关于 Data URI Scheme -- data:image/jpg;base64
转载一篇大神的文章 大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqA ...
- data:image/png;base64 上传图像将图片转换成base64格式
大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJ ...
随机推荐
- 【深入学习linux】Xshell的安装和使用
桥接模式下,连接xshell教程 centOS7 的ifcfg-ens33 跟刚才记录的一样 第一步:进入终端 /etc/sysconfig/network-scripts/目录 第二步:修改i ...
- 字符串反转(java和js)
写在前面 关于字符串反转的奇技淫巧很多, 会一种就行了, 但是解锁更多姿势可谓艺多不压身啊~~ 正文 java https://www.cnblogs.com/binye-typing/p/92609 ...
- pc端常用电脑屏幕 （(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）
PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率 比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸.12.1寸.1 ...
- android : 解决android无法使用sun.misc.BASE64Encoder sun.misc.BASE64Decoder 的问题, 无需添加rt.jar
一共包含: BASE64Decoder.java BASE64Encoder.java CEFormatException.java CEStreamExhausted.java CharacterD ...
- android -------- AndroidX的迁移
Google 2018 IO 大会推出了 Android新的扩展库 AndroidX,用于替换原来的 Android扩展库,将原来的android.*替换成androidx.*:只有包名和Maven工 ...
- 014 Mui
一:概述 1.说明 是开发出来的一套好用的代码片段 任何项目都可以使用MUI 官网:https://dev.dcloud.net.cn/mui/ 不能使用npm进行下载,需要手动从git上下载 2.下 ...
- Kafka安装教程（详细过程）
安装前期准备: 1,准备三个节点(根据自己需求决定) 2,三个节点上安装好zookeeper(也可以使用kafka自带的zookeeper) 3,关闭防火墙 chkconfig iptables o ...
- shiro中anon配置不生效
再配置shiro的时候,如下代码要注意: 1.下述代码中必须是LinkedHashMap 而不能是HashMap. 2.anon定义必须在authc之前 否则anon定义不生效 @Bean ...
- react-navigation安卓从右到左切换视图
百度搜了3天都没一个正确的答案,最后还是google查到的: "react-navigation": "^4.0.10", "react-navi ...
- 无限用teamviewer的一种方法,虚拟机中装teamviewer
可以使用window 多用户可以同时远程登陆的特性(win服务器版自动支持多用户同时远程登陆,非服务器版需要其他方法开启) 1.在window建立两个用户,如a,b. 2安装虚拟机vmware,安装操 ...