How can I append a .png image into a html file using java?

I generate a html file using log4j WriterAppender file. I also takesnapshots of my scr开发者_如何学编程een using webdriver. Now I wish to append them together.

Any idea how to do that?

Thanks!

Apologies for not being clear and daft. My situation is that I have got a html file which is generated dynamically by my logger class and then there are some .png file which are also being created dynamically. Now I want them to appear together in one file. Am I clear now? Please ask for more information if needed

It's possible to embed graphics data in a couple of ways. Most modern browsers accept the data: url notation. An image can be embedded straight into a url.

I took an example from this site. Cut and paste the whole line into the url bar:

data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7

You should see a folder graphic. Some older browsers don't accept this, and some such as IE8 restrict content in various ways, to static content for security reasons.

The second way of doing the same is for the server to serve multi-part MIME. Basically a server would shove out a multi-part mime document consisting of the HTML body and then any inline images base64 encoded as separate parts. This is more suitable for email HTML although it might work through a web browser.

It's not quite clear what you're asking here, but let's assume that you want to manually add an image to the log output HTML file.

If you want to include an image in your HTML file, just save the snapshot PNG file in a place relative to where the HTML is generated, then include it using standard HTML syntax:

<img src="images/snapshot.png" alt="snapshot description">

Update: the requirement is to add dynamically generated PNG files to a dynamically created HTML log file.

If one process is creating both the PNG and the log output, you should be fine - just keep note of the appropriate PNG filename and include it in the logger output in an IMG tag (as described above).

If they are generated by separate processes, this may be more difficult; you would need to either stick to a known naming convention, have the process generating the log query the filesystem to determine the appropriate PNG file to include, or build some sort of message-passing between the two processes.

Please stop posting the same comment to each and any of the different answers given to you, when all of those answers basically tell you that the notion of concatenating two different file formats into a single file is not meaningful.

Let me repeat that again for clarity: Copying a PNG file into a HTML document makes no sense.

You either save the PNG in a directory where it's accessible in the HTML document and add an img tag so it can be referenced (see the answer by stark), which would be the recommended way in terms of portability and usage of the files as they were intended to be used.

If you really, really want to end up with a single file for whatever reasons, there are bascially two options: You follow the advice of locka and encode the PNG image with Base64 and insert an img tag with a data URI at a meaningful position. This probably involves parsing the HTML "a little" to come up with a good place to insert it.

The other option is to not create HTML, but MHTML files. MHTML is a file format that allows saving HTML source code and resources like images into a single file. MHTML is supported by the most popular browsers nowadays, you may find info on the file format here: http://people.dsv.su.se/~jpalme/ietf/mhtml.html

In the code where you are generating the html you should just include the img using the img html tag

If you want the picture to appear in the html, add the tag <img src=./img.png /> to your html.

If you want the 2 files in one, you'll need to zip them into an archive or something?

It makes no sense to append a HTML file to a PNG file, or vice-versa. Neither file format allows this, so if you do this you will end up with a "corrupt" document that a typical web browser or image viewer won't understand.

"I want them to appear together in one file".

That's still pretty vague, I'm afraid.

Assuming that you want the image to appear embedded in the HTML document when you open the HTML document in a browser, the simple solution is create separate HTML and PNG files, and have the HTML file link to the PNG file using an <img> element.

If you want, you can bundle up the files (and others) as a ZIP or TAR file, so that you can deliver everything as a single file. However, a ZIP/TAR file typically needs to be extracted before the document can be viewed. (A typical web browser won't "display" a ZIP file. Rather it will open it in some kind of archive extractor or directory browser, allowing the user to access the individual files.)

It might also be possible to embed an image file in a HTML file by base64 encoding the image, and using embedded javascript to decode the image and then insert it into the DOM ... But this is probably waaay to complicated.