data格式加载图片
html img 使用data格式加载图片
背景
这久闲来无事给一位客户测试一款体检软件,是winform结构的,其中有一个功能是需要把生成的体检报告导出为html格式。测试导出后直接在谷歌浏览器里查看,体检详细内容、医生签名、条形码都能正常显示。关闭浏览器准备进行下一项测试,这时发现导出的就一个html文件,桌面上扫了好几遍也没看到医生签名和条形码这两个图片文件。心想这怎么能难倒我,也是重新在浏览器里打开,按下F12看个究竟。不过看了之后更让我纳闷了,img标签的src属性并不是显示图片的路径,而是一大堆字符<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAA...SAAAAABJRU5ErkJggg==" />,内容实在太长中间的"..."省略了大部分。研究了半天也看不出个所以然,但是从base64字样看得出后面的那堆字符应该是base64编码的字符串。难道是把图片编码为base64?心里一个大大的疑问。接触html这么久,也做了很多网站,可从未见过这种方式加载图片,甚至也从没听说过,难道是自己out啦!带着心中的疑问,迅速打开w3cschool找到介绍img标签的内容,仔细的看了一遍二遍,也没找到有价值的线索,这东西还真悬乎。看来只能寄希望于百度了,很麻利的输入关键字百度一下回车OK,打开搜索到的第一个链接,没让人失望就是我要找的答案,仔细阅读原来真是这么回事。
原来如此
这是什么呢,来扫下盲。Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。在上面的Data URI中,data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。
下面这幅图就是就是使用这种方式显示的,有兴趣你可以F12看下代码哦。
我们可以直接把这串字符粘贴到浏览器地址栏里,回车后就能看到图片。但不是任何浏览器对支持,需要IE8及以上、谷歌、火狐浏览器才支持。
github.com/nathanmarz
www.servicestack.net shuttle.codeplex.com
www.kentico.com
datarelay.codeplex.com
www.postsharp.net
data格式加载图片的更多相关文章
- html img 使用data格式加载图片
背景 这久闲来无事给一位客户测试一款体检软件,是winform结构的,其中有一个功能是需要把生成的体检报告导出为html格式.测试导出后直接在谷歌浏览器里查看,体检详细内容.医生签名.条形码都能正常显 ...
- vue动态加载图片,取消格式验证
vue 一. 动态加载图片 (以vue模板为例) app.vue 代码如下: <template> <div id="app"> <img :src= ...
- android 网络加载图片,对图片资源进行优化,并且实现内存双缓存 + 磁盘缓存
经常会用到 网络文件 比如查看大图片数据 资源优化的问题,当然用开源的项目 Android-Universal-Image-Loader 或者 ignition 都是个很好的选择. 在这里把原来 ...
- iOS: imageIO完成渐进加载图片
imageIO完成渐进加载图片 不得不说,人都是有惰性的,一个月又快结束了,这个月虽说有点儿忙,但是绝对不差写几篇博客的时间,有时间去n次桌球厅,有时间玩n把英雄联盟,所谓小撸怡情大撸伤身,这个月游戏 ...
- 多线程异步加载图片async_pictures
异步加载图片 目标:在表格中异步加载网络图片 目的: 模拟 SDWebImage 基本功能实现 理解 SDWebImage 的底层实现机制 SDWebImage 是非常著名的网络图片处理框架,目前国内 ...
- jQuery-瀑布流-绝对定位布局(二)(延迟AJAX加载图片)
jQuery-瀑布流-绝对定位布局(二)(延迟AJAX加载图片) 瀑布流-绝对定位布局,与浮动布局的区别在于 1.布局不一样: 绝对定位:一个UL里面放置所有的绝对定位的LI: 浮动布局:多个(一 ...
- BitmapFactory 加载图片到内存
Bitmap占用内存分析 Android的虚拟机是基于寄存器的Dalvik,它的最大堆(单个进程可用内存)大小一般是16M,当然不同设备是不一样的,可以查看/system/build.prop文件,[ ...
- javacript 实现瀑布流原理和效果, 滚动加载图片【图文解析 附源码】
先科普下瀑布流吧 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pin ...
- 【iOS入门】UITableView加载图片
学习带图片的列表 官方 LazyTableImages demo http://download.csdn.net/detail/jlyidianyuan/5726749 分析源码是学习的好方法. ...
随机推荐
- MVC 插件化框架支持原生MVC的Area和路由特性
.NET MVC 插件化框架支持原生MVC的Area和路由特性 前面开放的源码只是简单的Plugin的实现,支持了插件的热插拔,最近晚上偶然想到,原生的MVC提供Areas和RouteAtrribut ...
- Java数据结构与算法(3) - ch04栈(栈和转置)
栈的基本特性是后进先出,最简单的用途是用于转置,还有其他诸如括号匹配,中序表达式(A+B*(C-D/(E+F)) --> ABCDEF+/-*+)和后续表达式(345+*612+/- --> ...
- WinForms C#:html编辑器工程源码,含直接写WebBrowser的文件流、IPersistStreamInit接口的声明和一些相关的小方法
原文:WinForms C#:html编辑器工程源码,含直接写WebBrowser的文件流.IPersistStreamInit接口的声明和一些相关的小方法 首先多谢朋友们的捧场: 今天给大家带来一个 ...
- ios 设备基本信息检测
开发ios确实会让人身心愉悦(相对于deskop,android),ios app更多的让人集中注意力到它本身的体验,性能.这非常好,我非常喜欢相对完美的事物. 最近遇到一些乱七八糟的需求.需要获取一 ...
- 我的时间,GTD做主
可能每一次总结的时候,我们都在努力的回顾,我这几天都干了什么,结果回顾半天得到的结果就是:我也不知道,仿佛什么都没有做似的.事实上不然,你已经做了好多事,但却始终有这样的感觉,有的时候都在自己发问:我 ...
- Linux开源模块迁移概述暨交叉编译跨平台移植总结--从《嵌入式Linux驱动模板简洁和工程实践》
本文摘录<嵌入式Linux驱动模板简洁和工程实践>一本书"开发和调试技术". Linux强大的是,有那么多的开源项目可以使用.通常非常需要可以通过寻找相关的源模块被定义 ...
- td中的值自动换行
设置td中的值自动换行在<td ></td> 中加上这样一句代码,可以简省设置,使长字符串换行.而不用设置width,height. style="word-wrap ...
- Unity3d在线游戏Socket通讯
网络游戏是一个人的互动娱乐软件应用.因为它是交互式,当然,需要了解对方的通信.这需要通信Socket:我们今天要实现的主角即套接字.Socket的英文原义是"孔"或"插座 ...
- python初始化MySQL数据库模板
很基础,但是经常用到,记录一下,省得每次手打 #!/bin/env python # -*- encoding=utf-8 -*- import MySQLdb # Database info hos ...
- leetcode第30题--Next Permutation
problem: Implement next permutation, which rearranges numbers into the lexicographically next greate ...