Add IMAGE from BufferedImage into a loaded SVG Document

[Andres Toussaint]

I want to add a thumbnail representation of my SVG document in the same
document when a specific tool is selected, something like this:

1. Change "display" Atribute of TOOL handler layer to "inline" (to
trigger a updateManager event)

2. Catch updateCompleted
<http://xml.apache.org/batik/javadoc/org/apache/batik/bridge/UpdateManagerListener.html#updateCompleted%28org.apache.batik.bridge.UpdateManagerEvent%29>(UpdateManagerEvent
<http://xml.apache.org/batik/javadoc/org/apache/batik/bridge/UpdateManagerEvent.html> e)

3. Get the thumbanil image by AffineTransform of the buffered image from
updateManagerEvent.getImage()

4. Add the buffered image into my a SVG G Element (recuperated by a
svgDoc.getElementByID("appendLocation")) in a <IMAGE> element. (This
will be a added in the UpdateManager thread).

My Main question is: How is the best way to add this image into my document?

--------
Right now the only solution i have is the following, but i think there
may be a simpler solution:
Create a new Document and a SVGGraphics2D object, and paint into it the
BufferedImage, and then use the Document.importNode to add the thumbnail
into the first document.

Also, will doing this approach create a Embedded Image in my SVG? Or how
is the reference to the Image handled? What format of image will be
embedded (PNG, JPG,...)?

Any comment will be greatly appreciated.

Andres.

[Thomas DeWeese]

Post by Andres Toussaint
My Main question is: How is the best way to add this image into my document?

Encode it as a PNG and include it in the xlink:href using
the data protocol. This is what the code below does (very
indirectly).

The code to do this more directly (take from
batik.svggen.ImageHandlerBase64Encoder) is something like:

public static final String DATA_PROTOCOL_PNG_PREFIX =
"data:image/png;base64,";

ByteArrayOutputStream os = new ByteArrayOutputStream();
Base64EncoderStream b64Encoder = new Base64EncoderStream(os);

ImageEncoder encoder = new PNGImageEncoder(b64Encoder, null);
encoder.encode(buf);

// Close the b64 encoder stream (terminates b64 streams).
b64Encoder.close();

imageElement.setAttributeNS(XLINK_NAMESPACE_URI,
ATTR_XLINK_HREF,
DATA_PROTOCOL_PNG_PREFIX +
os.toString());

Post by Andres Toussaint
Also, will doing this approach create a Embedded Image in my SVG? Or how
is the reference to the Image handled? What format of image will be
embedded (PNG, JPG,...)?

The above will embed the image in the SVG.

[Andres Toussaint]

Thomas, thanks, this is a great simple approach. I will give it a try.

Just for the record, the approach solution indicated in the initial
question does work also, but of course it is not as simple.

Andres.

Post by Thomas DeWeese

Post by Andres Toussaint
My Main question is: How is the best way to add this image into my document?

Encode it as a PNG and include it in the xlink:href using
the data protocol. This is what the code below does (very
indirectly).
The code to do this more directly (take from
public static final String DATA_PROTOCOL_PNG_PREFIX =
"data:image/png;base64,";
ByteArrayOutputStream os = new ByteArrayOutputStream();
Base64EncoderStream b64Encoder = new Base64EncoderStream(os);
ImageEncoder encoder = new PNGImageEncoder(b64Encoder, null);
encoder.encode(buf);
// Close the b64 encoder stream (terminates b64 streams).
b64Encoder.close();
imageElement.setAttributeNS(XLINK_NAMESPACE_URI,
ATTR_XLINK_HREF,
DATA_PROTOCOL_PNG_PREFIX +
os.toString());

Post by Andres Toussaint
Also, will doing this approach create a Embedded Image in my SVG? Or
how is the reference to the Image handled? What format of image will
be embedded (PNG, JPG,...)?

The above will embed the image in the SVG.
---------------------------------------------------------------------