图片的DataURL技术
DataURL基本原理
在网页中我们通常用下面的方式来引用一张图片,这样当我们请求网页的时候,浏览器也会想服务器发起一个请求,去请求这张图片。
<img src='images/test.jpg'>
现在有一种另一种方式:
<img src='data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7'>
这种方式叫做DataURL技术,它是将图片对应的二进制代码,通过base64转换成可以打印的字母数字的形式。
这种方式需要有要求src具有一定的格式:
data:图片类型;base64,base64转换成的数据
图片类型可以为:images/gif,images/jpg,images/png等。
DataURL的优缺点
优点:
- 当图片很小时,但是占用一个HTTP请求显得太浪费时,可以用这个技术。
- 当图片是服务器端生成,并且每个用户都不一致的时候,例如验证码,有的网站的头像也可以用这种技术。
缺点:
- base64转换过后的图片会比原来的图片大1/3
- DataURL形式的图片不会被浏览器所缓存。
DataURL的使用
可以直接在html中以图片src的形式引用
<img src='data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7'>
可以在CSS样式中以url的形式引用:
background:url("data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7");
关于base64编码的知识,可以参考阮一峰老师的这篇文章:Base64笔记
图片的DataURL技术的更多相关文章
- CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...
- JAVA的图片文字识别技术
从2013年的记录看,JAVA中图片文字识别技术大部分采用ORC的tesseract的软件功能,后来渐渐开放了java-api调用接口. 图片文字识别技术,还是采用训练的方法.并未从根本上解决图片与文 ...
- HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术
最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...
- 用DIV+CSS切割多背景合并图片 CSS Sprites 技术
很久之前就在互联网网站和一些js插件中见过这种技术的应用,当时觉得很麻烦,就没有用,也没有去深究. 近段时间一直在做前台的一些东西,涉及到很多div+css的问题.这个东东我又碰到了,所以我花了点时间 ...
- 认知服务调用如何使用图片的DataURL
说明: Data URL给了我们一种很巧妙的将图片"嵌入"到HTML中的方法.跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成b ...
- CSS图片翻转动画技术详解
因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...
- DuKBitmapImages 图片压缩处理技术
Android图片压缩上传系列 *压缩中的问题: --图片压缩上如果存在问题,势必造成消耗大量的流量,下载图片的速度慢等影响产品性能,那么如何解决?请看下面: 压缩图片一共多少张?一起压缩?分开压缩? ...
- js canvas获取图片base64 dataUrl
function getImgBase64(path, callback) { var img = new Image(); img.src = path; //图片加载完成后触发 img.onloa ...
- CEF JS实现获取剪贴板图片的DataURL
转载:https://www.deanhan.cn/js-paste-upload.html 转载:https://segmentfault.com/a/1190000002915597 转载:htt ...
随机推荐
- PHP自带防SQL攻击函数区别
为了防止SQL注入攻击,PHP自带一个功能可以对输入的字符串进行处理,可以在较底层对输入进行安全上的初步处理,也即Magic Quotes.(php.ini magic_quotes_gpc).如果m ...
- 接口测试(二)—HttpClient
使用HttpClient进行接口测试,所需要使用的相关代码 HttpClient进行接口测试所需jar包:httpclient.jar.httpcore.jar.commons-logging.jar ...
- 获取设备的mac地址和IP地址(android6.0以上专用)
/** * 获取设备HardwareAddress地址 * @return */public static String getMachineHardwareAddress(){ Enumeratio ...
- eclipse设置汉化
1. 打开eclipse->help->install new software 2. 打开http://www.eclipse.org/babel/downloads.php,,,找到相 ...
- Visual Studio 2015 Update 3 正式版下载
vs2015-update3 .NET Core 1.0 文件名 cn_visual_studio_enterprise_2015_with_update_3_x86_x64_dvd_8923 ...
- 夺命雷公狗-----React---26--小案例之react经典案例todos(统计部分的完成)
这一个其实是比较容易的,只需要统计他的总数和已完成的即可, 效果如下所示: 代码如下所示: <!DOCTYPE html> <html lang="en"> ...
- 关于oracle数据库中进行查询的时候出现效率特别差的一种情况
下面这段代码执行效率是极慢的(根本没执行完成过): select /*+ parallel(16) */ z.small_code,trunc(hs.CREATED_AT),sum(hs.COST_S ...
- failed to lazily initialize a collection of role:XXX, no sessi
系统 框架 springMVC+hibernate 这种情况 由于 hibernate 的 懒汉机制,和 Spring 事务机制(不确定)造成的 由于 spring 配置的时候,在service 层 ...
- Git远程操作详解
Git是目前最流行的版本管理系统,学会Git几乎成了开发者的必备技能. Git有很多优势,其中之一就是远程操作非常简便.本文详细介绍5个Git命令,它们的概念和用法,理解了这些内容,你就会完全掌握Gi ...
- Spring Batch学习笔记二
此系列博客皆为学习Spring Batch时的一些笔记: Spring Batch的架构 一个Batch Job是指一系列有序的Step的集合,它们作为预定义流程的一部分而被执行: Step代表一个自 ...