Loading dynamic image into PDF or HTML

Loading the dynamic image files into PDF or HTML

Java code to generate Chart in base64 encoding

    
//Using JFree Chart library 
XYSeries series = new XYSeries("Users Incentive");
    series.add(75,  4.5);
    series.add(100, 6.0);
    series.add(105, 6.0);
    series.add(110, 7.2);
    series.add(115, 7.6);
    series.add(125, 8.5);
    series.add(150, 9);
    series.add(200, 12.3);
    XYDataset dataset = new XYSeriesCollection(series);

    JFreeChart chart = ChartFactory.createXYAreaChart(
         "Users Incentive",
         "Attainment in (%)",
         "Incentive (10K)",
         dataset,
         org.jfree.chart.plot.PlotOrientation.VERTICAL,
         true,
         false,
         false);
                        
    byte[] buf = EncoderUtil.encode(
            chart.createBufferedImage(500, 300),
            ImageFormat.PNG);
    
    String encodedImage = "data:image/png;base64," + new sun.misc.BASE64Encoder().encode(buf);

It will return the string something like this

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABLElEQVR42p2RTU4CQRSE51oeyAt4DRcGjWYiiiHgL/7HBAgRHEGMooJi/HeEC7gZepqeTfnehMVgd7S1k1p0J/X1e1WOMzoTUzv4i5zk4YdGX6Hei+D5EWq+wvGbQuVFofw8RPFpiKMHicN7ib2uxO6dHIfw5fRDwf+MftX0fhdbnVAHVN8VSo8SqVrwoybdDtZvDIDK6zjg+85JQL5lABRpV9sJshdCB3BItg0snxsAB5wwpbt9K1GgkDbaEmu0a/5KINcS8a8ZEpvTzYEO4GoKZN5sk5mMq9chcmTOXoZYYTMZl5oCi2cCbsMA4Gpsa1yoGwBcjW2Ic54BwOPa1jh7EugADsl2glTVAMiMqrHRjAmQjhMewKWAOKR5L4h35XH5ZzYlpQH+I/Z+ASHPmWGDU52UAAAAAElFTkSuQmCC

How to use it ?

In PDF Generation:
Here i am using FOP java library for pdf generation.

<xsl:attribute name="src">

      <xsl:value-of select="root/image">

</xsl:value-of></xsl:attribute>

In HTML:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABLElEQVR42p2RTU4CQRSE51oeyAt4DRcGjWYiiiHgL/7HBAgRHEGMooJi/HeEC7gZepqeTfnehMVgd7S1k1p0J/X1e1WOMzoTUzv4i5zk4YdGX6Hei+D5EWq+wvGbQuVFofw8RPFpiKMHicN7ib2uxO6dHIfw5fRDwf+MftX0fhdbnVAHVN8VSo8SqVrwoybdDtZvDIDK6zjg+85JQL5lABRpV9sJshdCB3BItg0snxsAB5wwpbt9K1GgkDbaEmu0a/5KINcS8a8ZEpvTzYEO4GoKZN5sk5mMq9chcmTOXoZYYTMZl5oCi2cCbsMA4Gpsa1yoGwBcjW2Ic54BwOPa1jh7EugADsl2glTVAMiMqrHRjAmQjhMewKWAOKR5L4h35XH5ZzYlpQH+I/Z+ASHPmWGDU52UAAAAAElFTkSuQmCC" />

In CSS:

.imgBackground {
 height: 16px;
 width: 16px;
 overflow: hidden;
 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA5UlEQVR42mNgQAJRcUn/YTg6PhnCjofwI+MSwbSDu89/BlwgMjbx/+dv3//jAjsPHvtvj8+AKKABn758hWtQ3OwNxjCwG2iAg4cvHgOATvz05RtOA3YSMiAyFmjAVzQXbEIYsOPAUUIGILwA0qyyxQ9sAMwV2/YdBYYBAQM+fsHtgi17DxEIA2CUff6GCINNTw78f/H9LYK/+yBuA+LMxP6TgjE0354g9X9DqiRRGKQWbgiI8e+I9P+5QZL/47TFiMIgtSA9YEPABlyVJgvDDfjdI/f/UZ0sSRikB8UAcjD1DKAEAwCVyv7/+0a8SwAAAABJRU5ErkJggg==") -0px -0px no-repeat;
}