浏览器中的data类型的Url格式,data:image/png,data:image/jpeg!

最新推荐文章于 2023-10-16 21:52:23 发布
最新推荐文章于 2023-10-16 21:52:23 发布
阅读量8.5k 收藏 2
点赞数
分类专栏： 学习笔记

所谓"data"类型的Url格式，是在RFC2397中 提出的，目的对于一些“小”的数据，可以在网页中直接嵌入，而不是从外部文件载入。例如对于img这个Tag，哪怕这个图片非常非常的小，小到只有一个 点，也是要从另外一个外部的图片文件例如gif文件中读入的，如果浏览器实现了data类型的Url格式，这个文件就可以直接从页面文件内部读入了。

data类型的Url格式早在1998年就提出了，时至今日，Firfox、Opera、Safari和Konqueror这些浏览器都已经支持，但是IE直到7.0版本都还没有支持，IE不支持的东西太多了，也不差这一个。:(

小例子

下面这个html代码可以在支持data类型Url的浏览器中运行，例如Firefox。运行后会看到一条蓝色渐变底色的标题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
.title {
background-image:url(data:image/gif;base64,R0lGODlhAQAcALMAAMXh96HR97XZ98Hf98Xg97DX97nb98Lf97vc98Tg973d96rU97ba97%2Fe96XS9wAAACH5BAAAAAAALAAAAAABABwAAAQVMLhVBDNItXESAURyDI2CGIxQLE4EADs%3D);
background-repeat:repeat-x;
height:28px;
line-height: 28px;
text-align:center;
}
</style>
</head>
<body>
<div class="title">Hello, world!</div>
</body>
</html>

这个渐变的蓝色底色实际上是用一个1x28的小图片通过横行重复(repeat-x)形成的。这个图片很小，不过104个字节，直接嵌入到html或css文件还是很合适的。

data格式的Url最直接的好处是，这些Url原本会引起一个新的网络访问，因为那里是一个网页的地址，现在不会有新的网络访问了，因为现在这里是网页的内容。这样做，会减少服务器的负载，当然同时也增加了当前网页的大小。所以对“小”数据特别有好处。

data类型Url的形式

既然是Url，当然也可以直接在浏览器的地址栏中输入。

data:text/html,<html><body><p><b>Hello, world!</b></p></body></html>

在浏览器中输入以上的Url，会得到一个加粗的"Hello, world!"。也就是说，data:后面的数据直接用做网页的内容，而不是网页的地址。

简单的说，data类型的Url大致有下面几种形式。

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

因为Url是一种基于文本的协议，所以gif/png/jpeg这种二进制属于需要用base64进行编码。换句话说，引入base64以后，就可以支持任意形式的数据格式。下面是个png图片的例子，会在浏览器中显示一个Mozilla的图标。

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHWSURBVHjaYvz//z8DJQAggJiQOe/fv2fv7Oz8rays/N+VkfG/iYnJfyD/1+rVq7ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw/8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJmTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi/G+QKY4hh5WAXGf8PDQ0FGwJ22d27CjADAAIIrLmjo+MXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwxYCbUIGTDVkHDBia+CuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha3AHFsIDtgPq/vLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg/kdypqCg4H8lUIACnQ/SOBMYI8bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAECCJ4XgMl493ug21ZD+aDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzgABBgAMJ5THwGvJLAAAAABJRU5ErkJggg==data格式Url的种种应用举例

可以在Html的Img对象中使用，例如

<img src=" data: image/x-icon;base64, AAABAAEAEBAAAAAAAABoBQAAF... " />

可以在Css的background-image属性中使用，例如

div.image {
width:100px;
height:100px;
background-image:url(data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF...);
}

可以在Html的Css链接处使用，例如

<link rel="stylesheet" type="text/css"
href=" data: text/css;base64, LyogKioqKiogVGVtcGxhdGUgKioq... " />

可以在Html的Javascript链接处使用，例如

<script type="text/javascript"
href=" data: text/javascript;base64, dmFyIHNjT2JqMSA9IG5ldyBzY3Jv... "></script>完整的语法定义

在RFC中，完整的语法定义如下。

dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value

urlchar指的就是一般url中允许的字符，有些字符需要转义，例如"="要转义为"%3D"，不过我测试下来，至少在Firefox里面，不转义也是可以的。

parameter可以对mediatype进行属性的扩展，常见的是charset，用来定义编码格式，在多语言情况下需要用到。例如下面的例子。

data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB

这个例子会显示出"你好，中文！"。如果吧charset部分去掉，就会显示乱码，因为我用的是UTF-8编码。

Firefox有一个data类型Url的测试页面，列出了各种格式的data类型Url的测试Url，和测试结果说明。

base64编码和内容的隐秘

把二进制数据转换成为Base64不是什么难事，比如Total Commander就有这样的功能。还有一些在线资源，

http://www.greywyvern.com/code/php/binary2base64 http://www.kawa.net/works/js/data-scheme/base64-e.html

有些在线转换把base64里面的“=”转换成为%3D，这个在Url中和“=”是一样的，不转换也没什么问题。

陆多多
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
data:image/png;base64是什么
mauersu
11-29 2052
源：http://copier.blog.163.com/blog/static/22010100201371294234760/ 评： 大家可能注意到了，网页上有些图片的src或css背景图片的url后面跟了一大串字符，比如： data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICA...
js+canvas实现图片格式webp/png/jpeg在线转换
11-19
`type`用于指定输出的图片格式，如`"image/webp"`、`"image/jpeg"`或`"image/png"`；`encoderOptions`（仅限于JPEG和WebP格式）是一个介于0到1之间的值，用于控制输出图片的质量。如果未指定`encoderOptions`，则...
【爬虫】data: image/png； base64图片数据
最新发布
想当运维的程序猿
10-16 4131
URI表示统一资源标识符uniform resource identifier，字符串表示的是经过base64编码的图片数据。经过查阅资料发现，data:image/png;base64, 字符串…爬wx小程序时遇到了响应返回下面的信息。通常遇到的图片是如下形式，称为。
data: image/png； base64 用法详解 ( 作用，语法，优缺点 )
热门推荐
weixin_50339217的博客
01-29 8万+
大家可能注意到了，网页上有些图片的 src 或 css 背景图片的 url 后面跟了一大串字符，如： background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b
浏览器中的data类型的URL格式
TrueMan's Blog
07-22 2628
所谓"data"类型的Url格式，是在RFC2397中 提出的，目的对于一些“小”的数据，可以在网页中直接嵌入，而不是从外部文件载入。例如对于img这个Tag，哪怕这个图片非常非常的小，小到只有一个 点，也是要从另外一个外部的图片文件例如gif文件中读入的，如果浏览器实现了dat
data:image/png;base64应用
Deng's Blog
06-26 2万+
文章主要介绍了data:image/png;base64的常见应用与使用方法。
有一种图片格式是“data:image/jpeg;.....==”
乱世之牙
03-28 1万+
昨天用到一个前端裁剪插件，在jq22上花了六个币下的，裁剪之后的数据是： “data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQ…==”这种形式的。 看起来是个二进制流的图片，毕竟data:image/jpeg了，但是直接把这一串传给后端写入”*.jpg”的文件之后无法打开，说明这串数据并不是二进制流的图片，...
浏览器中的data类型的Url格式 data:image/png,data:image/jpeg!
09-25
base64,base64编码的图像数据`：用于插入图像，其中*代表图像类型如gif、png、jpeg等。图像数据需先用Base64编码。 Base64是一种用于将二进制数据转换为ASCII字符的编码方式，使得这些数据可以在基于文本的系统中...
PNG图片转Delphi中Image.Picture.data代码-工具源码
09-20
本资源提供了一个工具的源码，用于将PNG图片转换为Delphi中`Image.Picture.Data`格式，以便在Delphi程序中直接使用。这个工具是作者自己编写的，适用于Delphi的DX10版本。 `Image.Picture.Data`是Delphi中的一个...
canvas保存为data:image扩展功能的实现
08-06
这篇博客"canvas保存为data:image扩展功能的实现"探讨了如何将Canvas的内容转化为data:image格式的图片，这是一种常见的数据URL模式，可以直接在浏览器中显示或用于网络传输。 在Web开发中，我们常常需要将用户在...
Image-Data-Hiding.zip_data hiding
07-14
4. **基于编码的方法**：使用如JPEG、PNG等图像编码格式，通过调整编码参数来隐藏信息。 在MATLAB的GUI实现中，用户界面设计使操作更加直观，用户可以通过交互式控制来调整数据隐藏的参数，如嵌入信息的容量、嵌入...
image_augmentor:图像数据增强工具
05-04
该实用程序将以递归方式在目录中搜索具有以下任何扩展名的文件： jpg, jpeg, bmp, png 。 transform参数使用下表中列出的代码确定将执行哪种类型的扩充操作： 代码 描述 值示例 fliph 水平翻转 fliph flipv ...
image-optimizer:优化 PNG、JPEG 图片
05-30
优化器优化图像 JPG、PNG。安装npm install image-optimizer科莫 Optimizer = require ' image-optimizer 'optimizer = new Optimizer src : ' /path/to/src.ext ' dest : ' /path/to/dest.ext ' options : pngquant...
DelphiPNGImage_delphi_image_image显示png_png_图片_
10-03
在Delphi编程环境中，PNG（Portable Network Graphics）是一种常见的位图格式，因其支持透明度和高压缩率而被广泛使用。然而，Delphi的标准`TImage`控件默认并不直接支持加载和显示PNG图像。因此，为了在Delphi窗体...
PHP生成DataMatrix格式的二维条码
02-18
除了上述基本步骤，你还可以通过查阅`jpgraph`库的官方文档或提供的示例代码，了解更复杂的用法，如添加文本标签、调整颜色、设置输出格式（如PNG、JPEG）等。 在给定的资源中，`remarks.txt`可能包含了关于如何...
Data URI scheme(转)
weixin_30363509的博客
01-20 436
大家可能注意到了，网页上有些图片的src或css背景图片的url后面跟了一大串字符，比如： 1 2 3 4 5 6 7 background-image:url(data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXR FWHRTb2Z0d2FyZQBBZ...
浅析data:image/png;base64的应用
weixin_33853794的博客
06-29 1619
前言 偶尔加入一个网安群的时候，入群题目是这个： data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAAAoCAIAAAAaOwPZAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAQuSURBVHhe7ZptmoMgDIR7rh6o5+lpvEwP0...
data:image/jpg；base64格式数据转化为图片
西门一刀的博客
08-03 6984
data:image/jpg;base64格式数据转化为图片
Data URI Scheme -- data:image/jpg；base64是什么
郎涯技术
03-29 1万+
大家可能注意到了，网页上有些图片的src或css背景图片的url后面跟了一大串字符，比如： data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAArrAYK
Not allowed to load local resource: file:///C:/Users/%E7%8E%8B%E5%AD%90%E4%BB%AA/.eladmin/file/tmp/path/to/image/%E4%BA%91%E8%AE%A1%E7%AE%97-4.png报错怎么解决
07-15
该错误是因为浏览器限制了加载本地文件资源的能力，而`file:///C:/Users/王子仪/.eladmin/file/tmp/path/to/image/云计算-4.png`是一个本地文件路径。 为了解决这个问题，你可以将图片地址改为可以通过 HTTP 协议访问的 URL。有两种常见的方法可以实现这一点： 1. 将图片存储到可以通过 HTTP 访问的文件服务器上，例如将图片上传到服务器上的某个目录，然后通过服务器的 URL 来访问该图片。这样，前端就可以直接使用服务器上的图片 URL 来显示图片。 2. 在后端代码中，将图片以字节流的形式返回给前端。前端可以通过 AJAX 请求获取到字节流，并将其转换为 Base64 编码的字符串。然后，可以使用 Data URI Scheme 将 Base64 编码的字符串作为图片的源来显示。 以下是第二种方法的示例代码（使用 Java Spring Boot 框架）： ```java import org.apache.commons.io.IOUtils; // ... @GetMapping(value = "/image/{imageName}") public ResponseEntity<byte[]> getImage(@PathVariable("imageName") String imageName) throws IOException { // 根据图片名称获取图片路径 String imagePath = "C:/Users/王子仪/.eladmin/file/tmp/path/to/image/" + imageName; File imageFile = new File(imagePath); // 将图片文件转换为字节数组 byte[] imageBytes = IOUtils.toByteArray(new FileInputStream(imageFile)); // 设置响应头，告诉浏览器返回的是图片类型 HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.IMAGE_PNG); // 返回图片字节数组和响应头 return new ResponseEntity<>(imageBytes, headers, HttpStatus.OK); } ``` 在前端代码中，使用 AJAX 请求来获取图片字节数组，并将其转换为 Base64 编码的字符串，然后将该字符串作为图片的源来显示： ```javascript // 假设从后端获取到的图片名称是 '云计算-4.png' var imageName = '云计算-4.png'; // 发送 AJAX 请求获取图片字节数组 $.ajax({ url: '/image/' + imageName, method: 'GET', responseType: 'arraybuffer', success: function (data) { // 将字节数组转换为 Base64 编码的字符串 var base64Image = btoa(new Uint8Array(data).reduce(function (data, byte) { return data + String.fromCharCode(byte); }, '')); // 设置图片源为 Base64 编码的字符串 var imgElement = document.getElementById('image'); imgElement.src = 'data:image/png;base64,' + base64Image; } }); ``` 请注意，在使用第二种方法时，需要确保后端代码中返回的图片类型与前端代码中设置的图片类型一致。以上示例中，返回的是 PNG 图片。如果你使用其他类型的图片（例如 JPEG），请相应地调整代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值