数据图像库64

Question

有人可以解释一下这是如何工作的？

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACDUlEQVR4Xu2Yz6/BQBDHpxoEcfTjVBVx4yjEv+/EQdwa14pTE04OBO+92WSavqoXOuFp+u1JY3d29rvfmQ9r7Xa7L8rxY0EAOAAlgB6Q4x5IaIKgACgACoACoECOFQAGgUFgEBgEBnMMAfwZAgaBQWAQGAQGgcEcK6DG4Pl8ptlsRpfLxcjYarVoOBz+knSz2dB6vU78Lkn7V8S8d8YqAa7XK83ncyoUCjQej2m5XNIPVmkwGFC73TZrypjD4fCQAK+I+ZfBVQLwZlerFXU6Her1eonreJ5HQRAQn2qj0TDukHm1Ws0Ix2O2260RrlQqpYqZtopVAoi1y+UyHY9Hk0O32w3FkI06jkO+74cC8Dh2y36/p8lkQovFgqrVqhFDEzONCCoB5OSk7qMl0Gw2w/Lo9/vmVMUBnGi0zi3Loul0SpVKJXRDmphvF0BOS049+n46nW5sHRVAXMAuiTZObcxnRVA5IN4DJHnXdU3dc+OLP/V63Vhd5haLRVM+0jg1MZ/dPI9XCZDUsbmuxc6SkGxKHCDzGJ2j0cj0A/7Mwti2fUOWR2Km2bxagHgt83sUgfcEkN4RLx0phfjvgEdi/psAaRf+lHmqEviUTWjygAC4EcKNEG6EcCOk6aJZnwsKgAKgACgACmS9k2vyBwVAAVAAFAAFNF0063NBAVAAFAAFQIGsd3JN/qBA3inwDTUHcp+19ttaAAAAAElFTkSuQmCC

这是如何生成图像以及如何创建它的？我在html中发现了很多次。

跟进问题

在加载时间和http请求方面，作为src的url有何不同？ 这会加快加载时间吗？如果我要使用50幅图像，它将如何扩展？

另外

如果这更好

上传，将图片转换为base64并将其保存在数据库而不是网址会使网站更好？

Answer 1

你可以像这样使用它：

<img alt="Embedded Image" src="data:image/png;base64,{base64 encoding}" />

它用于生成新图像，或将图像存储为纯文本。您可以在维基百科上阅读有关base64编码的更多信息： http://nl.wikipedia.org/wiki/Base64

它是如何工作的？

1. 字符转换为binair
2. 他们采取一组6位
3. 这些组将转换为十进制
4. 对于每个小数，它们取位于base64字符表中位置n + 1的数字，数字在0到63之间变化。

它并不总是正确出现，因为位数必须是6的倍数。如果是这种情况，根据所需的附加位数，将在末尾放置2或4个零。如果是这样，最后会添加=。

Base64字符表

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/

不同的语言和用法

<强> PHP

<?php
base64_encode($source);
// Or decode:
base64_decode($source);

<强>的Python

>>> import base64
>>> encoded = base64.b64encode('data to be encoded')
>>> encoded
'ZGF0YSB0byBiZSBlbmNvZGVk'
>>> data = base64.b64decode(encoded)
>>> data
'data to be encoded'

目标C

// Encoding

NSData *plainData = [plainString dataUsingEncoding:NSUTF8StringEncoding];
NSString *base64String = [plainData base64EncodedStringWithOptions:0];
NSLog(@"%@", base64String); // Zm9v

// Decoding

NSData *decodedData = [[NSData alloc] initWithBase64EncodedString:base64String options:0];
NSString *decodedString = [[NSString alloc] initWithData:decodedData encoding:NSUTF8StringEncoding];
NSLog(@"%@", decodedString); // foo 

Answer 2

“base64”之后的位是二进制png的base64编码版本。既然你的问题被标记为PHP，那么你将如何在php中做到这一点：

<?php
$img = file_get_contents('img.png');
echo "data:image/png;base64,".base64_encode($img);

Answer 3

如何生成图像？

首先，浏览器会将图像的src识别为Data URI。然后它尝试解析数据URI（请参阅chrome（ium）如何做here。）解析器解析URI，发现它是base64编码的图像，并使用base64解码器将其解码为二进制对象。相当于任何普通的图像文件。这个二进制对象随后在渲染页面时使用。

在加载时间和HTTP请求方面，作为src的URL有何不同？

由于没有发出HTTP请求且图像数据已经在内存中，因此URI的加载速度要快得多。

这是否会加快加载时间？如果我要使用50幅图像，它会如何扩展？

页面加载时间？要看。 Base64编码字符串大约是原始字符串的2-3倍。这意味着随页面加载传输更多数据。此外，浏览器中的数据URI图像未缓存！因此，如果您必须在不同的页面上显示此图像，那么这意味着它有明显的劣势 - 因为您每次都必须提供base64内容！相反，您可以简单地在图像数据类型上设置缓存标头，只需提供一次，然后让浏览器在后续页面加载中从内存/缓存中获取图像。这取决于您的具体用法。但是，您现在知道base64编码数据URI的复杂性。

总结

<强> +

1. 更容易生成/存储
2. 有固定的字符集
3. 较小的感知加载时间

<强> -

1. 传输更多数据
2. 需要通过浏览器解码
3. 没有缓存

Answer 4

格式： data:[<MIME-type>][;charset=<encoding>][;base64],<data>

此方法称为数据URI方案，它是一种URI方案（统一资源标识符方案），它提供了一种在网页中包含数据的方法，就像它们是外部资源一样。它是文件文字或此处文档的形式（是文件文字或输入流文字）。这种技术允许在单个HTTP请求中提取通常单独的元素（如图像和样式表），而不是多个HTTP请求，这样可以提高效率。

参考：http://en.wikipedia.org/wiki/Data_URI_scheme

参考：http://en.wikipedia.org/wiki/Here_document