DataUrl配图的优缺点 – 千丝海阁

首页 » 非技术 » DataUrl配图的优缺点

DataUrl配图的优缺点

2490 1

DataUrl是什么,为什么会谈起这个话题。tiandi要说还是因为撰写上一篇文章《Php下的Phalcon框架》的时候,插入配图的时候才发现的。你可以试试打开上文,看看中间配图的链接地址是什么就明白了。如果还不明白的话,请将下面一行代码复制到浏览器里,并打开看看是什么。

什么是DataUrl?

//直接将下面的地址复制到浏览器打开看看:

data:image/png;base64,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

上面那一行就是一张PNG转成base64后出现的代码,看那长长的一串代码,好像比直接填写图片地址复杂的多,那么DataUrl存在的价格在哪呢?

优势:

我们知道,如果写成下文这种调用图片的格式,则势必每次打开页面时都会发起一个链接请求。

<img src="http://xxx.xxx.xxx/xxx.png" />

那么DataUrl就是可以不必发起请求就可以显示图片的一种方法,它通过浏览器直接嵌入图片生成,你甚至可以在没有网络的情况下通过浏览器来显示一个DataUrl的图像。所以收DataUrl可以减少页面的链接数以达到前端的速度请求优化。

劣势:

只适合小尺寸图片,并且不支持cache,即每次刷新页面都是重新生成一张图片,当然,这个可以通过css来变相解决。

php获取DataUrl的图片编码:

function get_dataurl($file, $type) {
  $imagefile=file_get_contents($file);
  $result=base64_encode($imagefile);
  return "data:$type;base64,$result";
}
文章评分2次,平均分3.0

本文原始地址:https://www.tiandiyoyo.com/2014/07/what-is-dataurl-image/
本站所有文章,除了特别注明外,均为本站原创,转载请注明出处来自www.tiandiyoyo.com

评论前先开启评论开关:


1 Comment

  1. 撸一发data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAyCAYAAADLLVz8AAADaklEQVRoQ+2bz2sTQRTH3yRprYFYL9WWNlqhoChiaOqhJyvevOipsacWtFEQfxykBz0k1oM9VdFbSmmh+B9UVPAvqElzUhSFqtDECKEgXopJ487irLNrNtndN2kSfAs5ZDNv5s0n35nvy5JhQBeKAENFUzCYAMbj8UQ7MUmlUvebna8BkMPrrfQm+qG/2Tk5Gj8HOciz/KwGMekooEGNTACjlWgiyqJtsazXYb2ShjQB9CoMAuiV3J84AkgAkQSQ4aRAAogkgAwnBRJAJAFkOCmQACIJIMNJgQQQSQAZTgr83wGWdkoQezcLX7YLBop9/iCsnnwIQX+Xfk+0uROOwWj3CSQyc3hbK/Dtzw2Y/DAHT4dumsAs5p7DUuElrBy7C0f29hFAO8lwUMXSD5g5NGFqslPZgcTGEoQCQf2zVlBgPB29qCW5rL26VSyB1EjG9LzU9QNVK6RaSQmAEwfPwUJuVYfOL6tyXxXX4N7nRaOrmfAlGD9wtuZ83Szha9nIYLnkW2aMncFCRAPkCYglPN4z9o8K5QQFwMKvLWNZc1gPvq7Yvv+2XYTJ93Nwue98TYhuAIqc4pnh21BhjzAQlQDkCYiJClVZDUQ2kZimJqEoEZccnILToaO6Ecmfiy/oxqcnJkOyTtoLQN7HdDYSYWWftqTZKS8glQGUBxfL+sXWGnT5OmuaiLwvcuhXP84b7UWfMmQ79/YKUIwxnR5+zIDdcguxIQDlJLjBPPv+WldPJwvoCpPLGCtA7uZ2l3WvlNthAfK+rryJjDGm7Y3ADjsFiQZYTx18fxSqCu/pqQuwmgKdTEYFQD7OVDayv6Ps1yDCBSfjogHWc2EOUOxf9RQo9kAvhbYqgIbBOCx30ABlFx4NHYf5oevQ4QvoeQh3FmVItTrQes/qyrwfa0FeTRmqAfIxnJQ7SgDKDiv/lJMNRG5jtwcKg7DWgdUcXZULO1mmtcodZQCdJNLINo1QoJyvXblDAF1+q9ZyhwC6BGgtdwigB4ByubMwkuEPJ4zL9cMEj+MrD2v0Hug0YQLolJRNOwJIAOkfqp40QHugJ2x/gwggAUQSQIaTAgkgkgAynBRIAJEEkOEtqUB+1GuADSCntjvhm7AJeWiho1582tp5ueTuTF/NKM0+J8dn0Rbn4tTgbkwvBBDJ9TcB4VVg6bTobAAAAABJRU5ErkJggg==

载入分页评论...