`

利用Data URL(data:image/jpg;base64,)将小图片生成数据流形式

 
阅读更多
<img src="data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAwCAMAAAChd4FcAAAAA3NCSVQICAjb4U/gAAACRlBMVEUAAADi6OSMjIxSUlIrXja5trg8rFEDRhErokJ8w4pJrVxmZmYERRIinTn++P07nk/X0Naww7Stra0pdTj37/dlunUXWiS53L+ZmZmOy5pahGJKdVIQEBAsXzdni24VmC7MzMw1kEYzMzPZ4Nul1K6Wr5tWs2jp8eseaC0ufz5mZmaEoorI1cszpUkXTSJErFix2bi1tbVKSkp7e3skWC9wvn5zlHq6yL3S3dSXzqJBcEspKSnY6dxCQkLI486mvKulpaVAbUkTSx8ICAgjcDIhISHh7eM6Ojonnz1QsGP///+Dxo9Re1paWlqNqZOZzJmasJ6s1rMZGRk4pkx5wYYcYyodmzViuHPFxcVEtFl5mH/V3def0qlhh2rZ7d7F2MiEhIQ4Z0Lv8+/F4csvo0QbUidAp1OEoIoqfDozZjOx27kOSho6mkw2j0iftaMyi0S2xroSUiBrvHuFx5J0v4Lm7+eNqJOc0KVBq1TU59gpoEBskXRzc3Pg2N6tubDe5d99nYRNr1+ZmZkbWyg9pFHN18779/patWuZzJkzZT6Sq5e0xbfAz8OtvbUhazC12ryJpY6+3sXD0MbE4MmJyJUgVCtSsmXQ5tWjuKd5wobd8OEfYy0ZUCS9vb3v7+8LRxgtgD0xZzw1j0cnWjJiimp2mX2An4aUtZye1qkYmjDm5ube3t7W1tbk9+fM5NA4lEombjRWfl9Ke1K2270xhUGbs6BrjnI7akSY1aSrvq+5yr1Kc0q8zL/19fVrvXMxYjt5mX+1vbVNR7MSAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFnRFWHRDcmVhdGlvbiBUaW1lADAzLzI0LzEzWoVZMQAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAt9SURBVFiFzZn/U9NoHsfDl3KFXgOWAQtUL0Kh7EiF0sUFSqG0UsoDdYQgxBM9zUbOubIo2C7feoeM8HRWdjiqq7jnJuyt685d2ivrCHg4ZvRPuydJW5ICCj/s6WeYJn1Kklfen29PnmDCJ27YAeMQwv8rx4G2DyAEyNAWR5uPT7kHEICs16vbL1pbW/vmzr+xfHTGDEAgHLuSe2biXu25c+dqSycmTpxcFj4uogoQwPFXgdKbG4vT9aJNL27cLHV3dkDwsegENSB4UBGo3ZhW21dPAxV1H5FwFxDC1TOlG0i3TDtV+kO12s0ofZJpLn4kE16K1nTuox1pHMeTBzy4i3Ju/As5AY8Q2WlAXPh5vXh0L55oxetzyqoDLl+4DHie4CC9FIccH4+JJA8uzEOhqAh9hzzPxWIwViTAeYJHv4HmC6Fvy1+/xuuqqurGq3DLkyfcUQFx4UXg1qV98ZBtrl/ZJcSX+t51NrMG1sCxlIaIGSlXHIJjfavlNMsaiJgGUAQaImw2NqYhDDyE3/ad7Vu+fvrV7dM7z/vOtoa2V8tPHjZqUoDwSuCnA/mmL90KbKe9AubGwdd3qTjQsC6KdRUhIArHb3f++fa8AXCGOCsCLgEDh3M2G+GiADi5A0LL5eDC6urO2WXQd7luZ67isD5OAoLT6wfrJ2t4PnXPYHsL3P8FASK9+FhMBEKAVcvVr/6mAZytSFJwCSLAmIHi4/MQnOwAdePboPr86s4fl0H5t+Vbq334kQDBa/fN9/KhODzzIEmIP+h811fFulgNbWBZKi4ruNx6/0WzRmMjOBflWqIIQBk0bNxA2JCL37Q+f9FxBdxfPd1x9hh48UXF+Z9bD8knA0L61cX34yG7lz4naN6qAhoiTkO6qEiQkgJh112oAnRRDEI+znM8SoJ4PJ0kS1shrhnOz1dlXeaFJaF5/PISfRRA8HVgbP/8VdhGoDrlZBxAyMbEb4rkTpcZCFMlKF1m0G9y3RE3QOryR1EQWt7+mslXv7cgrlynD4hs/ICAOmhcZpa3H2pTIiDY2iPg2KlTGxlF8VKh+4l8Mohn2FobLii/p06+ZtlFxdX/AClKPlmMSvKqTa1gRUYEbpa6f/jBXfrZ6KhisPDH3/0sHQfXyloUVhYNkWQDaJhsStpkr6w03q+/k2JtKFMdASHn8UiEoBsj0BYSOpVlKwFB86NNZQovPj1z5djS0u25G/cK0yKeWnE/Kl+SLxz8g17PMD69Xj9rZfRDBUIZw7QUMLOzswxJarU+0ivJBKb0+UBWrJ1h9LumJdsAsGOVUtA6MI3Y+5yY2mJAATg+UahK19w3ssx1128syg4XJzVfVyWFhwmkQkFe71TLSNAamWqJ4ng/OVlQcDyRKGMi7e0Pr+IJc39/f0OQGW5AW/NxPMrUNKTspbmAvFqUnW3qMoqOrUQKShun/do1u2jhHLvdBZUKzpUqXVn8aClJD+ZzV+rrF29dDDzbfiPsxoWoSY8VqQAakEZAjD/vWl6JpTcYIQuCwWAbXYB09Pms9ST69DHMTLt2cK1lKmntEfI/3ZJMYUQ0gPnt9mzYjRlAVpakS46JUMcg3lerSIcxd7plCOCJe7N44kzFVlZmWbAskAkE1u8bRFFmaQiBNnKyxUeS09Mk6Wuh6/Mm8wfzI+Tj/MHBwXrrlwnt4OQQigCrVqsdGhwm/2HThXWYqSvt0bgTM8QwTzbiM2BSVCqTpLNYAfjjs6x0FkL6n+tv39XBPVUL0hIgEAFx/PhQjdeLAGeD0Zcvo8HZKbp+2osuNSLHYIRpb9c2WRKJtYjVPJNIeGvIGQnET4TDYRPmD4clBecHMMwZAw4sR3k5TIBZb28qAFeUbRx/0GHZW1MhLSrYDmnc7BtEX4R8fWRtdLLFKp/BKgKKhadFny/eqwwIQ6FQCXOcDtF0DzmD4/yAKQ52Y7AbcwE+B8MGcjBPPBMwVwl4UdXG95lZQstkT03N9DT6qFnIK6ipebyGf1/TjgCZyPfIIsx+gIO9Pqs1DwUAST6MiAo6sW5KbCwOjAVStXEhzGwTcrdRpYgIeEIJeE41EdqnJ+FtpNWKxBI/UcxZrUwUNTLRxdpJ88iIeVJycUhyca8ozrAIGGxoCgYX8iZLSu601ZBXgV+MPL8aELVAHRp1ZQAK9CtlDG5+XrX7D/Qv1fN7RbyamDk+Onp8Zq0NMbUlZiC80/SlddA8axXLo9VnRklSZjabm5jhfrTpYVCSTIqok0xb/gKN95BXRRCHCQsDoFQQhj1YpoRiFlesKAALJ97tZvH937s/L+/gMxghBAkruhAulRmUBlfJAjOTL5jLRhbyyu40CJZpxieXGb1UZhIJbZMX5U/EOpI/G2yryfsTNqDDdJRJDaipxLBGtkutoVgHt0uVdfrmmdtJHlD3qLjwx3vu3JPHODUj+G62BM1LkmUGf6ltGvGVge8WvMP1d6ZHcLxhMD8/v3eYfNyLtoMt8CETjAwhVCuqNPrHEbKNitlQsvJSJ0kC2oxiZYQg1oV5OKgC3FJ3kpUb49LqB9j5/OIomtWIfeTt2Te0olJ767UtIlkSMN/X0uuLtmsLvJH6MpKJyv1NikF5N6oNRlPduOyllCQuBCiaA6PkLGaNpkYpoXmnTl2owdKNW6qJy6/uivvLy9V97pXF5PhG8cTE9bt1KRcLJUy9F6YAYaiA7F+oj/b4/g5qSG+vbzh5G8ksRntRbQmdNu8CKjMSIEFRRBdmJCgC78bscRsRp5ARyHhlqxOE1hX1zOqn2glkF28px06dmwgkeww9yTBm8dK4WR9E5WRKX4JcHhn67stgPekNTfse4knA79OApNKsEqDOtTs3MGZMFrrSTpbmg+fdKh8jWxwbW8wYurQRuC8B4u0+ckRGaPg30ggfWWjvIRP//Rc+OMTUWMBfSrzyrGfqD0kFBUvwcY3C8mkoNhKqMmXdhMHRpTS/0sUCPv+s+AOPTKIVn0gJH02kLtyfZIkmQNFf8VA0ahFsfCqfQmZvSgf11Bo1SYE3EtKDgGR7FvrUE1YB3A0UfvCZZCywuvtMsruCKB0v9Sw56LMqWXQ1+QfF3FjahfIOeixxNR72sUR+qgudWPmggE+/SccFoIxGNKMEcSOSQQC0wajBQaUubrQJkGN5geU1Rkr+wZicebLzrJEVJ2Yao4sDsW6TgTvco3vyubgjsPkBJ38WOJa+ZV1l2D+QDYwOe9ikA4QjJ1xZyTUONOaYnMI8ZhM8jpxGTxhQA357jkmcMAucqQsN6YDF2Wj3OyjKYQrzRwFEk9bAxvsIL321/jy9smDEUG9BH36PgWcNkm95O++sBIDFCB4BYnYAwibIGiFHIFAREG3ANQ/QdcV4vtEE7I7Drm8lAaFQMTH2nrWZDfeL9CMw0DmQ+7JQB8ju7qrMpj2od4oxiMorIQN6DGhiMgB5ndOpM9nFpTrOg1qt0QQrHf7GRr8OhB1HXTwCodaJgzX8yl1BpxMRlTCUgNkYb88WhYw7nQD1J9bpTwOKjf+aCXQ7IOA9dsDxCNAoTqaAbgDdi/EaUvKICoqEFYHNfZYvpfhb7+MUdwzDXf4chw24Bhp1Th1eVenUVepgt1+l4LUBYOzy+3O6/CC7i5MAjSaBa3SgQw3A5emOHW75aHeFFQhzgdrCfUQcexp4rn5rAmIGlkZ+5VhDXHQvhTYwHkOhtsRxRZxQhB7Y+bj8b3wRjBGCEOelIQiKDCy6FCRsh1zCVKxRQ7BzIlBcmKHiWHHgm+VMf8BkYd2tg8l1DiD/QXkXSkvF0upGakisnXI5PBxfxiq/5Zdngdpbu32vcLM2kLvKHfZkv4Wp35NAkFVdccNdWlt8E1lt6cSjigv8J/SeRBARYfPWXF/n29zczr658cvwE3vTJJrUQHmeP9Iy3m9mB7zthJ/M287/AdxppEv2qVN4AAAAAElFTkSuQmCC" />

那这些代码是如何生成的咧?

先看下这些代码“data:image/jpg;base64,iVBORw0KGgoAAAANSUhE……” 就是一张图片的Data URL,就是利用base64编码把图片数据翻译成标准ASCII字符。

 

等同于:

<img src="http://www.oschina.net/img/logo_s2.png"/>

 

显示结果:

Data URL是在本地直接绘制图片,不是从服务器加载,所以节省了HTTP连接,起到加速网页的作用。 
语法:

data:image/jpg;    声明数据协议及类型名称
base64,               编码形式为base64
/9j/4AAQSkZ……    base64编码结果

最后附上Data URL的生成方法(PHP): 

<?php
$img_file = file_get_contents("http://www.oschina.net/img/logo_s2.png");
echo base64_encode($img_file);

注意:本方法适合于小图片,大图片就不要考虑了,另外IE8以下浏览器不支持这种方法。用这种方法会加重客户端的CPU和内存负担,总之有利有弊。

分享到:
评论

相关推荐

    webp格式一键转小图片,拖入即转成功,保留原文件名称,扩展名可选(jpg,png),路径可选(默认原路径)非常方便,一次一个

    工作中的小帮手webp2image 引用组件: Imazen.WebP 放入依赖文件(重要必须,否则无法使用,libwebp.dll) 本压缩包为x86兼容64位。 自动保存到原路径:和webp同路径 下拉框:可选保存的文件格式(默认jpg可选Png) ...

    js 显示base64编码的二进制流网页图片

    这里的`&lt;mediatype&gt;`表示数据的类型,例如`image/gif`代表GIF图片,`&lt;data&gt;`是实际的数据,如果使用base64编码,则会添加`base64`作为分隔符。例如,一个简单的2x2白色GIF图片的Data URI可能是这样的: ```html ...

    利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解

    将图片转换成base64编码的,在web网上一般用于小图片上,不仅可以减少图片的请求数量(集合到js、css代码中),还可以防止因为一些相对路径等问题导致图片404错误。 引言 假设一个应用场景:由于某些特殊原因从...

    labview 图片缩放 base64编码base64解码

    在IT行业中,LabVIEW(Laboratory Virtual Instrument Engineering Workbench)是一种强大的图形化编程环境,主要用于...通过实践,你可以掌握如何在LabVIEW中有效地处理图片,以及如何利用Base64编码进行数据传输。

    JS实现小图片Base64上传php接收实例

    Base64是一种将二进制数据转化为可打印字符的编码方法,常用于在电子邮件系统中传输非ASCII字符。对于图片,Base64编码可以将图片数据转换为文本格式,使得图片可以直接嵌入HTML或JavaScript代码中。 在JavaScript...

    1x1:像素透明PNG base64编码在线生成器

    标题中的“1x1:像素透明PNG base64编码在线生成器”指的是一个网页工具,它的功能是生成一个1像素大小、具有透明度的PNG图片,并将其转化为base64编码。这种工具通常用于Web开发中,例如作为占位符图片或者在CSS中...

    Base64图片与字符进行相互转换

    - 后端开发中,Base64编码可用于临时存储和传输图片数据,比如在API接口中返回图片的Base64字符串,或者将Base64字符串存入数据库。 5. **Base64编码的优缺点** - 优点:简化传输,兼容性好,适合少量数据传输。 ...

    169张很棒的论坛小图片集(附演示)

    169张论坛用小图片,分为好多组,使用面很广哟,可以用在论坛的各个地方 &lt;br&gt;&lt;img src=http://...

    十一套共300张MSN表情小图片(有演示)

    &lt;img src=http://...

    图片转为base64

    在IT行业中,Base64是一种数据编码方法,它将二进制数据转化为可打印的ASCII字符串形式。在网页开发中,特别是在JavaScript环境下,将图片转换为Base64字符串有着广泛的应用,例如在处理小体积的图像、实现数据的轻...

    基于PHP的图片在线转Base64编码.zip

    - **增大页面大小**:Base64编码的字符串通常比原始图片文件大约33%,这可能导致页面加载速度变慢。 - **不适合大文件**:对于大尺寸的图片,增加的页面大小可能不划算,且可能影响用户体验。 总的来说,基于PHP的...

    DataURL_生成工具_网页版_英文版

    3. **生成DataURL**:工具会自动生成完整的DataURL字符串,包括"data:"前缀、媒体类型(MIME type)以及Base64编码的数据。 4. **复制输出**:用户可以方便地复制生成的DataURL到剪贴板,然后直接粘贴到HTML、CSS或...

    图片转Base64编码工具

    这种工具通常接受图像文件(如.jpg、.png、.gif等),读取其二进制内容,然后按照Base64算法进行编码,最后生成一个包含Base64字符串的结果,这个字符串可以直接在HTML或CSS中使用。 描述中的"图片转Base64编码工具...

    base64_example.zip

    3. **加密和认证**:Base64编码常用于将密钥或证书转换为文本格式,方便传输和存储。 4. **JSON数据**:某些API可能会使用Base64编码来传递二进制数据,如图片或音频片段,因为JSON标准只支持ASCII字符。 在压缩包...

    最强大学校网站系统全站源代码学校网站模板下载

    29:首页田字格小图片数量选择 29:后台1~3级菜单选择 30:系统设置不启用分级时打开新闻页空白补丁 31:新闻全部显示最新补丁 32:后台管理修正小BUG 33:忠网弹出广告修正 34:后台2处管理权限修正 35:...

    【JavaScript源代码】vue动态加载本地图片的处理方法.docx

    url-loader 类似,但在文件大小低于设定阈值时,它会将文件转换为 Base64 字符串。选择哪个取决于项目需求,通常 url-loader 更灵活,能处理小图片的优化。 以上就是在 Vue.js 中处理动态加载本地图片的不同方法。...

    Base64 Encode编码实现1x1px透明(黑白)图片

    我们都知道图片有一个base64编码,可以将你的图标变成代码的方式 现在的无线淘宝应用往往都是采用这种方式 今天特意将一个小的透明的图片压缩后代码提供给大家使用 使用方法: 附件中图片src指向的代码直接...

    php实现图片以base64显示的方法

    Base64编码是一种基于64个可打印字符来表示二进制数据的表示方法,它能将任何形式的二进制数据转换为文本数据,以便可以通过纯文本形式存储和传输。在Web开发中,Base64编码的数据通常用在Data URL scheme中,它可以...

    vue-cli3.0图片转base64规则配置

    vue-cli3.0图片打包,小于10k的图片没有自动转base64问题处理

    Sprite图片合并工具GoPng.zip

    Css Sprite,有时也称为雪碧图、精灵图,是每一个前端开都会遇到的问题,也是常见的小图片加载优化手段。相信各位同学都清楚其原理,具体就不赘述了。 之前一直有动机利用html5实现一个合成雪碧图的工具,方便小项目...

Global site tag (gtag.js) - Google Analytics