数据图像base64

Question

数据图像base64

6

请问这是如何工作的？

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中经常看到这个。

跟进问题：

相比于作为src的url，这个有什么不同，包括加载时间和http请求方面？这样做能加快加载时间吗？如果我要使用50张图片，会怎么样呢？

还有。

如果这种方式更好的话，在上传时，将图像转换为base64并保存在数据库中，而不是使用url，会使网站更好吗？

- Cindy93

也许这会有所帮助：https://dev59.com/l3VC5IYBdhLWcg3wtzut - Mathias Müller

http://en.wikipedia.org/wiki/Data:_URL - BlitZ

你可以开始在文档中阅读相关内容，这样会更好。否则，你可以四处寻找答案，翻遍每一块石头，看看下面是否有你需要的信息，然后再问：为什么？什么？那里？怎么做？（提示：搜索也可以解决问题）。 - hakre

4个回答

2

“base64,”后面的内容是二进制png文件的base64编码版本。由于您的问题标记为PHP，以下是如何在PHP中执行此操作：

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

- phil-lavin

2

它是如何生成图像的？

首先，浏览器将图像的src识别为Data URI。然后尝试解析Data URI（请参见Chrome（ium）如何在这里）。解析器解析URI，发现它是一个Base64编码的图像，并使用Base64解码器将其解码为二进制对象。这等效于任何普通的图像文件。此后，将使用此二进制对象来呈现页面。

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

由于没有发出HTTP请求，图像数据已经在内存中，因此数据URI应该加载得更快。

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

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

总结

+

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

-

传输更多的数据
需要浏览器解码
没有缓存

- Prasanth

1

格式: 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

- Krish R

直接从维基百科复制粘贴描述真的合适吗？我知道这是相关信息，但至少给一个小总结并链接该页面。 - defect

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joran Den Houting · Accepted Answer

您可以这样使用它：

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

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

它是如何工作的？

字符被转换为二进制
它们取一个6位组
这��组将被转换为十进制
对于每个十进制数，它们会在base64字符表中取n + 1位置上的数字，数字在0到63之间变化。

如果比特数不是6的倍数，则不总是正确。如果是这种情况，则根据所需的附加比特数，将在末尾添加2或4个零。如果是这样，则会在末尾添加=。

Base64字符表

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/

Different languages and usage

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'

Objective 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