使用JavaScript解码图像

Question

I have a little generated JavaScript from a JSP page that looks like this:

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

The code snippet above is called when the user clicks on a button, and step is a variable that is increased with every run of the function. Image is a Servlet that generates a PNG-encoded Image.

This works, but it is very slow because the Server must generate the Image when the Client wants it. I know I could pre-load the Image, but I thought of a better solution. Since I know how many steps are allowed, I thought of generating the Images when the page is requested, and embed them into the JavaScript, maybe Base64-encoded so that the Image can be viewed on all OS.

Is it possible to do this? If yes, how could I implement it? I don't want to use external JavaScript frameworks like jQuery, and I don't care about browsers that are not really common, it'll be enough if it works with Mozilla browsers and Google Chrome.

Answer 1

If you only want to embed the image source into a HTML page, you can do the following:

<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>    

This is supported by pretty much all browsers: http://caniuse.com/#feat=datauri … “Partial support” for IE means that it is limited to images and CSS, but images is what we do here.

Example: http://jsfiddle.net/m869e2ar/1/