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. C# 利用SQLite对.DB和.logdb加密和解密和SQLite创建数据库

    1.最近研究了下利用SQLite为db文件简单的加密和解密 private static SQLiteConnection GetConnection() { SQLiteConnection con ...

  2. extjs 学习小窍门

    一.从form中获取field的三个方法: 1.Ext.getCmp('id'); 2.FormPanel.getForm().findField('id/name'); 3.Ext.get('id/ ...

  3. (最重要)学了这么久的编程,你知道byte吗?

    在c#中,Byte b=12; 上面是合法的,因为Byte是一个字节.他的范围是0-255. 如果是 Byte b=4096;这是错的 ,必须加上强制类型转换. 这个小问题,虽然很小但是值得注意.

  4. Repeater的Item项绑定DropDownList

    前台页面: <asp:Repeater ID="rptJgtList" runat="server" OnItemDataBound="rptJ ...

  5. curl 模拟请求get/post

    $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx24a0ef ...

  6. linux 报错 bash ‘/bin/sh: Syntax error: “(” unexpected

    今天用make 编译 蹦到 bash ‘/bin/sh: Syntax error: “(” unexpected 和 /bin/sh: [[: not found 这种莫名奇妙的错误 原因是是lin ...

  7. Lucene热词统计

    1.建立搜索表 ID KeyWords DT 搜索一次保存一次,id才用guid提高效率 /// <summary> /// 搜索数据 /// </summary> /// & ...

  8. 手机sdk 开发

    题记:很多做游戏开发的人,估计都或多或少地接过渠道SDK,什么UC,当乐,91,小米,360......据统计国内市场当前不下于100家渠道,还包括一些没有SDK的小渠道.每个渠道SDK接入的方法呢, ...

  9. socket网络编程

    一.客户端/服务器架构 C/S架构,包括 1.硬件C/S架构(打印机) 2.软件C/S架构(Web服务) 最常用的软件服务器就是Web服务器,一台机器里放了一些网页或Web应用程序,然后启动服务,这样 ...

  10. Arnold AtArray API Test

    #include <ai.h> #include <iostream> #include <stdio.h> #include <vector> #in ...