使用JavaScript解码图像

我有一个从JSP页面生成的JavaScript，如下所示：

var elem = document.getElementById("image");
elem.src = "Image?step="+step;

当用户单击按钮时，会调用上面的代码段，

step

是一个变量，随着函数的每次运行而增加<代码>图像是一个生成PNG编码图像的Servlet

这是可行的，但速度非常慢，因为服务器必须在客户机需要时生成映像。我知道我可以预加载图像，但我想到了一个更好的解决方案。因为我知道允许执行多少步骤，所以我考虑在请求页面时生成图像，并将它们嵌入到JavaScript中，可能是Base64编码的，以便可以在所有操作系统上查看图像

---

有可能这样做吗？如果是，我如何实施？我不想使用像jQuery这样的外部JavaScript框架，我也不关心不太常见的浏览器，如果它能与Mozilla浏览器和Google Chrome一起使用就足够了。

如果您只想将图像源嵌入HTML页面，可以执行以下操作：

<img id="image" src="" width="100" height="100" alt="" />

<script type='text/javascript'>/* <![CDATA[ */
    var img = '<?php echo base64_encode(file_get_contents('/path/file.png')); ?>'
    document.getElementById('image').src = "data:image/png;base64," + image;
/* ]]> */</script>    

/*  */    

几乎所有浏览器都支持这一点：…“部分支持”IE意味着它仅限于图像和CSS，但图像就是我们在这里所做的

---

示例：

您是否正在寻找数据URI？如果没有，你能解释一下“解码图像”是什么意思吗？@lxg我想我已经这么做了。我想写一些类似于

var-imagestring=

的东西，然后在浏览器显示时解码该图像it@lxg您发布的链接看起来是一个很好的方法，但是

image/png

不是base64编码的，我想让它在多个OSI上工作，我在问题中提到我使用的是JSP，而不是PHP。这将是

，这只是一个例子。基本上，加载一个二进制图像文件，base64编码并将其转储到JS变量中。