Simon's Blog

Databinding to an image component.

The XPages image component is read only. So it is great for reading an image from your document/URL, but if you do any kind of image editing then it becomes a pain to save it back. Or if you need to pull an image from another location (ie. avoid link jacking) it doesn’t have an easy way to do this.

The easy way around it is to convert the image to a text resource instead.You can pull an image, convert to text and store with ease, using Java. The image component can then read the value directly.

Example XPage code: 

 <?xml version="1.0" encoding="UTF-8"?>
 <xp:view xmlns:xp="http://www.ibm.com/xsp/core">
 <xp:image id="image1">
 <xp:this.url>
 <![CDATA[#{javascript:
var urlString = "http://sodohertydotcom.files.wordpress.com/2012/01/simondemoing.png";

var url = new java.net.URL(urlString);
var bi = javax.imageio.ImageIO.read(url);

var baos = new java.io.ByteArrayOutputStream();

javax.imageio.ImageIO.write(bi, "png", baos);

var byteArray = baos.toByteArray();
var base64Bytes = com.sun.org.apache.xml.internal.security.utils.Base64.encode(byteArray);

// Save this variable to your text field.
var answer = "data:image/png;base64," + base64Bytes;

return answer;}]]>
 </xp:this.url>
 </xp:image>
 </xp:view>

Limitation: 

Due to a bug in Java it is not possible to save the favicon.ico image from a web site this way.