Question

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

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

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

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

有可能这样做吗？如果是，我该如何实施呢？我不想使用像jQuery这样的外部JavaScript框架，我不关心那些不常见的浏览器，只要它适用于Mozilla浏览器和谷歌浏览器就足够了。

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/

使用JavaScript解码图像

1 个答案: