javascript - Pass image from java applet to html

Question

I am using a signed java applet to load an image from the filesystem of the user.
Then I want to display this image in the website where the applet is running.

I know how to communicate between applet and JavaScript, but I only used strings and numbers as parameter.

How do I handle image objects and how do I display them on the website?

If required I can convert the format in the applet to match the JavaScript.

Edit:
I passed the Image object from java to javascript with a call from JSObject. Chrome ignores the call and Firefox crash..

Answer 1

You might encode the image as Base 64, pass it to JS as a String, and use the data:image/gif; form URL to display it in the web page. You'll need to 'roll your own' base 64 encoder or find an API, since the J2SE has no inbuilt method for the conversion.¹

It might look something like this in the HTML.

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" 
width="16" height="14" alt="embedded folder icon">

E.G. taken from Inline Images with Data URLs.

1. On later JREs (once JAXB was introduced) look to use DatatypeConverter.printBase64Binary(byte[]) something like this:

ByteArrayOutputStream baos = new ByteArrayOutputStream();
try {
    ImageIO.write(image, "png", baos);
} catch (IOException e) {
    showError(e);
    e.printStackTrace();
}
String imageString = "data:image/png;base64," +
    DatatypeConverter.printBase64Binary(baos.toByteArray());