html - GWT 中的数据 URI

Question

是否可以在 GWT 中创建数据 URI？

我想使用数据 URI 将字节数组图像作为实际图像注入。

Answer 1

是的。完全可以做到这一点。在我意识到 IE6 不能以这种方式处理二进制数据流之前，我已经为应用程序完成了它。您可以通过多种方式做到这一点。出于我的示例的目的，我已经假设您已将字节数组转换为某个地方的字符串，并且它已正确编码并且具有适合您的数据 URI 的类型。我还假设您知道所选数据方案的基本格式（或可以找到它）。

我从有关数据 URI 方案的 Wikipedia 文章中获取了这些示例。

第一种是像往常一样使用原始 HTML 来制作图像引用，并将其插入到页面中。

HTML html = new HTML("<img src=\"data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==\" alt=\"Red dot\">");

您也可以只使用图像。（这应该产生大致相同的输出 HTML/JS。）

Image image = new Image("data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==");

这允许您在加载的图像之上使用图像抽象的全部功能。

我仍然认为您可能希望扩展此解决方案并使用 GWT 的延迟绑定机制来处理不支持数据 URI 的浏览器。(IE6,IE7)

Answer 2

您应该在 GWT 的主干中检出 ClientBundle。它将自动为支持它们的浏览器创建数据 url，并为其他浏览器创建后备：http ://code.google.com/p/google-web-toolkit/wiki/ClientBundle

该功能要到 GWT 2.0 才会发布，但现在它被大量使用。