Decoding base64 image data using xslt

Question

I am trying to have a single xml and at most one xsl stylesheet, the contents of the xml file are like below

<catalogue>
    <item>
        <item_id>1234</item_id>
        <item_desc>hi-fi sanio</item_desc>
        <price>12.50</price>
        <image>iVBORw0KGgoAAAANSUhEUgAAANIAAAAzCAYAAADigVZlAAA</image>
    </item>
    <item>
        <item_id>4614</item_id>
        <item_desc>lace work</item_desc>
        <price>1.50</price>
        <image>QN0lEQVR4nO2dCXQTxxnHl0LT5jVteHlN+5q+JCKBJITLmHIfKzBHHCCYBAiEw</image>
    </item>
    <item>
        <item_id>614</item_id>
        <item_desc>bicycle</item_desc>
        <price>150</price>
        <image>jVteHlN+5q+JCKBJITLmHIfKzBHHCCYBAiEwlEQVR4nO2dCXQTxxnHl0L</image>
    </item>
</catalogue>

The purpose is to be able to share the xml file with end users so that they can view it using their web browser (IE11 for now).

I'm using python and lxml to create the xml file I have encoded the image of the items using base64 encoding and added an image node to each item. I really want to embed the images directly in the xml so when an end user opens it up everything renders in their browser. i.e no hyper-links

I am at a loss as to how to get end-user browsers to decode the image node. They won't have any application whatsoever to decode so everything must be either in the xml or in an associated stylesheet using the browser.

Does anyone know if it is at all possible to use the xsl to decode the image embedded in the xml document? Any examples that I can look at to see how it would be done.

Generally what are good ways to encode and then decode (embed) images (png/jpg) using only xml alone or in conjunction with xsl?

Regards

I wasn't aware about data: and URIs for xml, or even for html, really. I guess I'll have to read up on it. — user595985
Are those real images in your example? If yes, in what format are they? — michael.hor257k
@MartinHonnen, according to caniuse.com/#feat=datauri IE 11 and Edge support data: URIs for images. I think your comment should be an answer, so this question can (potentially) be marked as answered. — LarsH

Martin Honnen Martin Honnen · Accepted Answer · 2016-08-09T09:15:22

If you have the base64 encoded data in your XML and you want to embed an img rendering that data in your HTML then you can construct an <img src="data:image/png;base64,{.}"/> image element in the XSLT code with a data URI (https://en.m.wikipedia.org/wiki/Data_URI_scheme) (and of course the proper MIME type of the image data), here is an example (assuming the MIME type image/png):

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

    <xsl:output method="html" doctype-public="about:legacy-compat" encoding="UTF-8" indent="yes" />
    <xsl:strip-space elements="*"/>

    <xsl:template match="/">
      <html>
        <head>
          <title>data URI test</title>
        </head>
        <body>
          <xsl:apply-templates/>
        </body>
      </html>
    </xsl:template>

    <xsl:template match="catalogue">
        <table>
            <thead>
                <xsl:apply-templates select="item[1]" mode="header"/>
            </thead>
            <tbody>
                <xsl:apply-templates/>
            </tbody>
        </table>
    </xsl:template>

    <xsl:template match="item" mode="header">
        <tr>
            <xsl:apply-templates mode="header"/>
        </tr>
    </xsl:template>

    <xsl:template match="item/*" mode="header">
        <th>
            <xsl:value-of select="local-name()"/>
        </th>
    </xsl:template>

    <xsl:template match="item">
        <tr>
            <xsl:apply-templates/>
        </tr>
    </xsl:template>

    <xsl:template match="item/*">
        <td>
            <xsl:value-of select="."/>
        </td>
    </xsl:template>

    <xsl:template match="item/image">
        <td>
            <img src="data:image/png;base64,{.}"/>
        </td>
    </xsl:template>

</xsl:transform>

Online at http://home.arcor.de/martin.honnen/xslt/test2016080901.xml respectively http://home.arcor.de/martin.honnen/xslt/test2016080901.xsl, for the first image element I have used the example image data from the Wikipedia article and all four browsers (IE, Edge, Chrome, Firefox) render the embedded image. The sample data from your input XML does not seem to be recognized as image/png, I have also tried image/jpeg without any success, I am not sure what kind of image data that is.

Decoding base64 image data using xslt

1 Answers