javascript - 使用 JavaScript 解码图像

Question

我从 JSP 页面生成了一些 JavaScript，如下所示:

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

当用户单击按钮时，将调用上面的代码片段，并且 step 是一个变量，该变量会随着该函数的每次运行而增加。 Image 是一个生成 PNG 编码图像的 Servlet。

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

可以这样做吗？如果是，我该如何实现？我不想使用像 jQuery 这样的外部 JavaScript 框架，也不关心那些不太常见的浏览器，只要它能与 Mozilla 浏览器和 Google Chrome 兼容就足够了。

Answer 1

如果您只想将图像源嵌入到 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>    

几乎所有浏览器都支持此功能:http://caniuse.com/#feat=datauri ... IE 的“部分支持”意味着它仅限于图像和 CSS，但我们在这里所做的就是图像。

示例:http://jsfiddle.net/m869e2ar/1/