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技术的更多相关文章

  1. CSS3图片翻转动画技术详解

    CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...

  2. JAVA的图片文字识别技术

    从2013年的记录看,JAVA中图片文字识别技术大部分采用ORC的tesseract的软件功能,后来渐渐开放了java-api调用接口. 图片文字识别技术,还是采用训练的方法.并未从根本上解决图片与文 ...

  3. HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...

  4. 用DIV+CSS切割多背景合并图片 CSS Sprites 技术

    很久之前就在互联网网站和一些js插件中见过这种技术的应用,当时觉得很麻烦,就没有用,也没有去深究. 近段时间一直在做前台的一些东西,涉及到很多div+css的问题.这个东东我又碰到了,所以我花了点时间 ...

  5. 认知服务调用如何使用图片的DataURL

    说明: Data URL给了我们一种很巧妙的将图片"嵌入"到HTML中的方法.跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成b ...

  6. CSS图片翻转动画技术详解

    因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...

  7. DuKBitmapImages 图片压缩处理技术

    Android图片压缩上传系列 *压缩中的问题: --图片压缩上如果存在问题,势必造成消耗大量的流量,下载图片的速度慢等影响产品性能,那么如何解决?请看下面: 压缩图片一共多少张?一起压缩?分开压缩? ...

  8. js canvas获取图片base64 dataUrl

    function getImgBase64(path, callback) { var img = new Image(); img.src = path; //图片加载完成后触发 img.onloa ...

  9. CEF JS实现获取剪贴板图片的DataURL

    转载:https://www.deanhan.cn/js-paste-upload.html 转载:https://segmentfault.com/a/1190000002915597 转载:htt ...

随机推荐

  1. PHP自带防SQL攻击函数区别

    为了防止SQL注入攻击,PHP自带一个功能可以对输入的字符串进行处理,可以在较底层对输入进行安全上的初步处理,也即Magic Quotes.(php.ini magic_quotes_gpc).如果m ...

  2. 接口测试(二)—HttpClient

    使用HttpClient进行接口测试,所需要使用的相关代码 HttpClient进行接口测试所需jar包:httpclient.jar.httpcore.jar.commons-logging.jar ...

  3. 获取设备的mac地址和IP地址(android6.0以上专用)

    /** * 获取设备HardwareAddress地址 * @return */public static String getMachineHardwareAddress(){ Enumeratio ...

  4. eclipse设置汉化

    1. 打开eclipse->help->install new software 2. 打开http://www.eclipse.org/babel/downloads.php,,,找到相 ...

  5. Visual Studio 2015 Update 3 正式版下载

    vs2015-update3    .NET Core 1.0  文件名 cn_visual_studio_enterprise_2015_with_update_3_x86_x64_dvd_8923 ...

  6. 夺命雷公狗-----React---26--小案例之react经典案例todos(统计部分的完成)

    这一个其实是比较容易的,只需要统计他的总数和已完成的即可, 效果如下所示: 代码如下所示: <!DOCTYPE html> <html lang="en"> ...

  7. 关于oracle数据库中进行查询的时候出现效率特别差的一种情况

    下面这段代码执行效率是极慢的(根本没执行完成过): select /*+ parallel(16) */ z.small_code,trunc(hs.CREATED_AT),sum(hs.COST_S ...

  8. failed to lazily initialize a collection of role:XXX, no sessi

    系统 框架  springMVC+hibernate 这种情况 由于 hibernate 的 懒汉机制,和 Spring 事务机制(不确定)造成的 由于 spring 配置的时候,在service 层 ...

  9. Git远程操作详解

    Git是目前最流行的版本管理系统,学会Git几乎成了开发者的必备技能. Git有很多优势,其中之一就是远程操作非常简便.本文详细介绍5个Git命令,它们的概念和用法,理解了这些内容,你就会完全掌握Gi ...

  10. Spring Batch学习笔记二

    此系列博客皆为学习Spring Batch时的一些笔记: Spring Batch的架构 一个Batch Job是指一系列有序的Step的集合,它们作为预定义流程的一部分而被执行: Step代表一个自 ...