问题标签 [data-url]

我试图允许用户保存已渲染到画布的图像。可能有多个图像，我希望用户能够一次下载所有图像作为单个 tar 文件。我正在尝试编写代码来生成这个 tar 文件。我已经完成了大部分工作，但是当最后将 tar 文件下载到我的计算机时，我发现构成 png 文件的一些二进制数据已损坏。以下是相关代码：

我将先前渲染的帧放在未渲染的画布上，并使用 canvases toDataURL() 方法对带有 Base64 编码的帧的编码 png 版本。接下来，我使用 atob 将其转换为字节字符串，以便可以将其附加到我正在生成的 tar 文件的内容中。

当我在十六进制编辑器中查看文件时，我的 tar 标头是正确的，但 png 的内容并不完全正确。ASCII 内容看起来很正常，但二进制数据是加扰的。

提供的任何帮助将不胜感激。谢谢。

附言

我附上了我看过的相关帖子的链接。他们很有帮助，但我还没有看到任何可以完全解决我的问题的东西。谢谢。

将 Data URI 转换为 File，然后附加到 FormData，并将Data URI 转换为 Object URL，在 chrome/ff 中使用 createObjectURL

我有一个二维条码生成器在（Java）后端制作一些条码。它给了我数据 URL，我使用 Javascript 在客户端设置它们。在 Chrome、Firefox 中一切正常。但不是在 IE8 中（当然！）虽然一半的图像工作，一半不工作。

我的图像是几百字节（远小于 32kb）

这是一个在 IE8 中不起作用的示例：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAAAAADFHGIkAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEnRFWHRTb2Z0d2FyZQBCYXJjb2RlNEryjnYuAAAAgklEQVR42nVRixKAMAjy/3+a2hBwdVtdD1RELFxOXS6+9v1+F/+ICFs5jpGqsQWSosy3MQbVGSEDC7q4FaQrRiJDepJ1iG2sATggaqkeCc3VqicDDu6omgk1VdmS4W3Uq4sr4hE8llSYKe7GXsTxTPdZTdlyLQA4xrKQOit+Ryv7nwfFATbY5mERHQAAAABJRU5ErkJg

这是一个在 IE8 中工作的示例：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFMAAABTCAAAAADG2WTcAAAACXBIWXMAACZzAAAmcwHzbHUKAAAAEnRFWHRTb2Z0d2FyZQBCYXJjb2RlNEryjnYuAAABAklEQVR42u2ZwQ7AIAhD+f+f3nbwMGwBl3hYg1xM5ngmUBE3u/abCTHtMTZcS4N3O0z3dNiYg+eeickZ02LMVzRcPJ0DD77zPsw5CQv6BGaYIwkmxo6+/V7S2CKHGShvYaNDmngN+T0TfGk9Y/E0DL4YkxVsWCQsSGGOOjPhHaNVfM5W2YMpMCFu2A3QQyHb722ZkQAT+dLzVJEJvqz4hYqc1H2Y4XHgU0WPCmzFxJhMjrTO00K3uDd7MXm8SSdKc1fej/7LLGTK+8yvPW0jZrGZ15sQXWbUGCTXOXIoiDGLLx3RUN1lOjOzCp5MkzZUmlkIM9JnGs9ezF2mxuz8r2e33b2PHKlEJ4PKAAAAAElFTkSuQmCC

这是一个小提琴。JS fiddle 在 IE8 中效果不佳，因此请使用此链接直接查看结果。

如果您对此问题的原因有所了解，请分享:)

以p01 的 MATRAKA 为例。

我对链接的 URI 提供的内容进行 base64 处理，并将其放入数据 URI：

Content-Type 适合，它与他们用于通过 HTTP 提供服务的方式相同。但是当导航到 URI 时，Chrome 中什么也没有发生。甚至没有显示 Web 控制台错误消息。它适用于火狐。

为什么它可以通过 HTTP 在 Chrome 中运行，但不能使用 Data URI 方案？

假设我有一个UIImage实例，我想将其转换为数据 URI 并注入UIWebView.

我知道我可以NSData使用PNGRepresentation/JPEGRepresentation方法将 UIImage 转换为 PNG/JPEG。但是那我如何确保转换是base64？然后如何创建一个包含实际 URI 和标头的字符串？

现在想在我的网站上添加一些所见即所得的编辑器。由于管理文件上传不便（需要做几个小时的工作），我想找到一些编辑器，能够编辑文本并将图像作为<img src="data:image/jpeg;base64,STUFFSTUFFSTUFFHERE"数据 URL 嵌入其中。

我没有找到这样的编辑器，所以现在我在想，可能有某种目的，使得无法传播这种图像处理方式。

有人能告诉我为什么吗？

我从画布中得到base64编码的图像：

然后我把它变成这样的数据：

然后我通过以下方式将其写入文件系统：

我尝试将其设置为这样的图像的 src：

这会写入文件，我可以找到它并获得一个 url（通过读取它并使用事件：event.toURL()。但是图像在网页上显示为损坏的图像图标。我做错了什么？

我正在尝试遍历某个列表并始终重绘我的画布。重绘画布后，我试图接收画布的 dataurl 并将其推送到数组中。那部分有效，但它总是给我与第一个相同的 dataurl。

当我查看画布中的绘图时，我总是得到正确的结果，但我无法获得该绘图的 dataurl。

有人可以帮助我吗？

我正在尝试使用 jQuery 更改数据 URL。目前我的代码看起来像这样。

如您所见，我将 url-data 留空，因此我可以确定它只是在 jQuery 中设置。但是，每当我单击推文按钮时，它总是会打开带有当前页面链接的窗口。有人可以解释我如何通过 jQuery 或 javascript 将其设置为其他内容吗？

我们正在用 PHP 生成我们的页面，并希望在浏览器中尽快加载生成的页面。在生成页面（即.html页面）时，我们意识到我们有两个选择：

带有数据 URL 图像的页面

带有“正常”图像的页面

DataURL 的优缺点：

优点：

• 从浏览器到服务器的行程更少（只有一次行程） - 鉴于生成的性质，并且需要维护它和 CSS，使用 sprite 在这个项目上效果不佳

• 较小图像上的带宽使用较少

• 在 HTTPS 中更快

缺点：

• 由于 base64 编码，图像尺寸会更大（大约大 37%）

• 在 IE7 和 IE8 中不起作用，大小限制为 32KB

“一趟”真的会有很大的不同吗？用户会注意到吗？

我一直在尝试使用以下代码从字节数组中生成图像数据 URL：

byteArrayOutStream包含正确的数据，因为我已经测试将其保存为 jpg 文件并在设备上查看。

我通过将 logcat 的结果传输到文件、复制整行并将其粘贴到 Chrome 中来测试数据 URL 输出。

我在 chrome 中看到的完全是空白的。如果我在 Chrome 检查器中检查它，就会出现一个大小正确的空白 JPG。

我尝试将其下载为 jpg 文件并使用 Windows 照片查看器打开它。它似乎已损坏：

不过，左上角图像的唯一可见部分是正确的数据。