I have a image as byte[]
in my bean. User can upload image using <h:inputFile/>
. As soon as user clicks upload the image should be displayed in the page(Should not be saved in DB/Folder). I tried using Base64 convertion but in IE it's displaying only 32KB size image.
Below is my xhtml code.
<h:form id="signatureform" enctype="multipart/form-data">
<h:inputFile id="inputFile" label="file1" value="#{bean.part}"/>
<h:commandButton id="upButton" type="submit"
action="#{bean.uploadSignature}"
value="Upload" styleClass="commandButton">
</h:commandButton>
</h:form>
<h:graphicImage url="data:image/jpg;base64,#{bean.encodedImage}"
width="275px" height="75px"></h:graphicImage>
My Java code is
private String encodedImage ;
private Part part;
//getters and setters
public String uploadSignature() throws IOException {
InputStream inputStream = null;
try {
inputStream = part.getInputStream();
encodedImage = new String(Base64.encode(IOUtils.toByteArray(inputStream)));
} catch (Exception e) {
} finally {
if (inputStream != null) {
inputStream.close();
}
}
return SUCCESS;
}
I have tried with <a4j:mediaOutput/>
but no help. Please help me to resolve it.
Finall i was able to display my Image in IE. My requirement was to display an image in 275px *75px. For this requirement i resized my image in Java and displayed in the Web page. When i resized my image and converted to Base64 string it became less than 32kb. I tried with 12MB image and it worked fine :). Below is my code.
BufferedImage imBuff = ImageIO.read(inputStream);
BufferedImage resizedImg = resize(imBuff, 275, 75);
ByteArrayOutputStream os = new ByteArrayOutputStream();
ImageIO.write(resizedImg, "jpg", os);
encodedImage = new String(Base64.encode(os.toByteArray()));
private BufferedImage resize(BufferedImage image, int newWidth, int newHeight) {
int currentWidth = image.getWidth();
int currentHeight = image.getHeight();
BufferedImage newImage = new BufferedImage(newWidth, newHeight, image.getType());
Graphics2D graphics2d = newImage.createGraphics();
graphics2d.setRenderingHint(RenderingHints.KEY_INTERPOLATION,
RenderingHints.VALUE_INTERPOLATION_BILINEAR);
graphics2d.drawImage(image, 0, 0, newWidth, newHeight, 0, 0,
currentWidth, currentHeight, null);
graphics2d.dispose();
return newImage;
}
Hope this will help others who are trying to display a big image in small size in the web page.