Question

我试图对我的图像进行基础编码，以便通过CSS显示它：

background-image: url(data:image/png;base64,%codeForImage%)

所以我尝试了我在这里找到的东西：

https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding

但它不会向我显示任何图像（使用'phonegap android drawable'中的png图像。

两个问题：

我该如何解决这个问题？如何在没有base64的情况下显示图像。

示例：是否可以抓取图像的字节并通过

显示

background-image:url(data:%uncodedImageBytes%)

背景：我从phonegap插件获取图像的字节，我正在尝试向用户显示图像。

Answer 1

第一段代码是正确的：

background-image: url(data:image/png;base64,%codeForImage%)

插入二进制数据无法正常工作。

如果您看到的是不同的图像而不是您期望的图像，那么您的CSS选择器与该元素不匹配（例如，如果该元素是<div id="foobar">，那么您的选择器是div.foobar），或者您的选择器是not specific enough。

在任何一种情况下，用Firebug之类的东西检查元素并检查哪些CSS规则应用于元素，以及是否可以在顶部看到想要的那个。

Answer 2

我建议一般针对移动应用程序使用Base 64。

<强> Why? Check here.

如果您想在性能提升的情况下使用Base64，那么我建议您使用this one之类的网站进行Base64编码。否则，您的url字符串看起来合适，但二进制文件不是它期望的格式。有趣的是，它期待Base64 - 这完全不同。

修改

如果您需要在运行时以及仅使用二进制文件执行此操作，请在JavaScript中执行此操作。它有一个烘焙功能，它将处理来自Window对象的二进制编码Base64。

Here's the documentation

像这样使用：

var bSixtyFourString = window.btoa(%MY_BINARY%);

编码图像base64

2 个答案: