问题标签 [data-url]

base64在AngularJS中使用包含数据的变量加载图像

我试图找到从包含base64编码图像数据的变量中加载图像源的正确方法（例如，使用从画布中提取toDataURL();）。

起初我只是这样尝试：

其中图像是一个范围变量，其中包含一个dataURL包含base64数据的变量。这实际上工作得很好，唯一的问题是404我的控制台出现错误。像这样的东西：

获取http://www.example.com/%7B%7Bimage.dataURL%7D%7D 404（未找到）

没那么漂亮。当我尝试像这样更有棱角的解决方案时：

图像根本没有加载。我做了一个小提琴，你可以找到HERE

有什么建议可以在我的控制台中消除这个错误吗？

编辑：

格鲁夫兔子是对的。这<img data-ng-src="{{image.dataURL}}" />是工作...

可以找到工作解决方案HERE

I need to play some music in html5 by using audio tag. The data is a base64 string(data:audio/wav;base64,xxxxxx) which is generated by the server. Like image tag,it is said that audio tag can also use the data url,so I tried this:

But I failed,nothing happened. I searched for the result and find this:

Play audio using base64 data in html5

There is a data url in the answer and I tried it,it played well.

So I think my base64 data is wrong,but when I put the data url into the browser address bar．It is played by some plugin!!Just the same performance like below(worked well but need to use a plugin):

So my question is: what is the difference between the two ways?

I think there maybe some file header that should be contained when using audio tag,but I am not sure about it.

I find this link where the guy use the header template(RIFF<##>WAVEfmt \x10\x00\x00\x00\x01\x00\x01\x00<##><##>\x02\x00\x10\x00data<##>"):

Playing audio from data:url google chrome mobile

Appreciate for any help,thanks in advance.

EDIT Oh,so sorry to find out that most browsers do not support for the audio/midi data type,the object tag can play it because the plugin is more powerful. And I found a midi.js here:

https://github.com/mudcube/MIDI.js

我几乎完成了创建我的 web 应用程序。后端使用 Django。除其他外，该项目允许用户上传自己的图像并使用 CamanJS 对其进行调整。图像可以有不同的大小（5mp 或更多）和各种颜色。用数字表示，用户可能有大约。他的每个客户有 60 张图像，可能有 1000 个客户。因此，如果我们采用最坏的情况并说每个图像大约 3mb，我们就有

知道我的应用程序将在线（可能通过）并且可能有很多用户处理图像大小的最佳方法是什么？如果我只是将 tha dataURL 保存到数据库（base64 格式）会更好。这会减少项目所需的高清空间的大小吗？我必须说重要的是图像不要丢失它们的初始细节。因此，如果要应用压缩，则不需要降低图像的质量。你认为最好的解决方案是什么？

我有一个具有多个值的数据属性。我将如何从中获得一个价值？

http://jsfiddle.net/taGBL/19/

我有这个对象：

如何从该对象创建文件？

我希望能够在没有任何先前模型的情况下创建 base64 文件（图像、声音、视频）。例如，如果我想创建一个 base64 64px*64px 红色图像，我该如何在不创建画布的情况下做到这一点？

我还想创建一个没有模型的声音（音符）。

我在 Google 上搜索了一些关于 base64 编码的文档，但似乎没有找到适合我需要的特定内容。

我将使用 Javascript，但我想这对于每种语言都应该是相同的。

我正在使用铬。

这是我的代码。

它运行良好，但不会更改图像名称。它保存为“download.png”。

怎么了？

简单的问题

我有一个来自 Google Drive API 的缩略图，我需要保存一份副本，因为它有有效期。

语境

我正在为管理员构建一个后端以向网站添加内容，并且我使用 Google Drive 作为资源管理工具。我在 Meteor 上运行它，所以它是服务器端的 Nodejs。

尝试

1. 使用众所周知的canvas方法来检索数据url

   但由于 CORS 限制（缩略图来自 Google 域），它失败了。

2. "Okay, so since it'll be stored on the server, I might as well do the job directly there."好吧，可以获取图像内容，但是由于一些未知的黑暗诅咒，我没有设法将内容转换为正确的 base64 格式。生成的字符串几乎与预期的输出相似，但有大约 10% 的不匹配字符......我尝试了大量的函数来进行 base64 转换，但我无法正确处理。我最终得到了这个我认为是正确的简单代码女巫，内容编码肯定缺少一些东西......（这是流星代码，使用 collection-hooks 包）

   我尝试了使用和不使用缓冲区包装器以及所有可能的缓冲区编码参数，与其他传统转换函数相比，'ascii' 是产生正确输出的原因，例如：http://hellerim.net/base64_src.php。

3. "Proxy the god damn image then!"是的，尝试过，遇到了 html 标头的问题...（http-methods 包）

   如果我不设置“内容类型”，我会得到数据，当然是文本。否则我什么也得不到。"Right, this is because 'content-length' is missing!"...如果我添加它，我的服务器会因可爱的错误而崩溃Can't render headers after they are sent to the client。我又一次停在这里，因为我不是流星专家，我不知道桌子底下发生了什么。必须有一些自动添加的标题，我必须通过任意定义内容长度来搞乱一些过程，否则我不知道，见鬼！

4. "Wow, dude, you like it hard! Why don't you just store them as files?"首先，我更喜欢将其存储到数据库中，因为它更易于管理，而且我相信使用 dataURL 最适合快速显示缩略图。其次，因为禁止访问流星公共文件夹，所以我必须手动将文件存储到服务器上的其他地方，女巫很丑，然后提供一个访问点来允许他们检索，真是一团糟。另外我尝试了mongodb的gridfs文件存储。无法让它工作，meteor 包装器（CollectionFS 包）太有问题了，它有很多用于简单存储缩略图的基础设施。

所以，如果有人对第一点有任何想法，我马上给他买啤酒！我已经坚持了一个多星期了，我的弹药用完了！

谢谢 =)

如何使用 dataurl 在淘汰赛中显示图像？

我有一个可观察的淘汰赛，其值设置为图像的 dataurl。我想将此图像绑定到 span 元素的 html-5 数据绑定属性。

目前，图像未显示。谁能帮我语法？

示例代码：

我有一个 asp.net-mvc 站点，并且我正在使用jqgrid，并且我有几个字段，其中编辑控件是一个下拉列表。我有一个问题，下拉列表所依赖的名称来自另一列，因此每次打开编辑表单或单击“+”以添加新条目时，我都需要从服务器强制刷新确保显示正确的字符串。

我看到 Internet Explorer 似乎缓存我的下拉列表的问题，即使我非常努力地告诉它不要这样做。我没有在 Firefox 或 Chrome 中观察到这个问题。

这是我的代码：

我正在观察该问题的 Col MODEL 行：

这是构造编辑按钮和添加按钮的代码

我想

或者

会做的伎俩，但它似乎没有任何区别。

但我观察到，当我打开编辑表单或新表单时，不会调用我后端的函数来返回下拉列表的项目列表，因此必须有一些客户端缓存。

每次尝试编辑或添加新条目时，如何强制刷新 dataurl ( dataUrl: "/SiteSettings/GetSelectData ")？