Resizing .tif image with imgscalr

Question

I am trying to resize a .tif image and then display it on the browser by converting it to a base64 string. Since ImageIo doesn't support TIF images by default, i have added imageio_alpha-1.1.jar(got it here - http://www.findjar.com/jar/geoserver/jai/jars/jai_imageio-1.1-alpha.jar.html). Now ImageIO is able to register the plugin, which i checked by doing this

String[] writerNames = ImageIO.getWriterFormatNames();

writerNames has TIF in it, this means ImageIO has registered the plugin.

I am resizing the image like this

Map resizeImage(BufferedImage imageData, int width, int height, String imageFormat){

                BufferedImage thumbnail =  Scalr.resize(imageData, Scalr.Method.SPEED, Scalr.Mode.FIT_EXACT ,
                    width, height, Scalr.OP_ANTIALIAS);

                String[] writerNames = ImageIO.getWriterFormatNames();

                ByteArrayOutputStream baos = new ByteArrayOutputStream()
                ImageIO.write(thumbnail, imageFormat, baos)
                baos.flush()
                byte[] imageBytes = baos.toByteArray()
                baos.close()

                return [imageBytes:imageBytes, imageFormat:imageFormat]
            }

    String encodeImageToBase64(byte[] imageData){
                return Base64.encodeBase64String(imageData)
            }

BufferedImage getBufferedImage(byte[] imageData){
                ByteArrayInputStream bais = new ByteArrayInputStream(imageData)
                BufferedImage bImageFromConvert = ImageIO.read(bais)
                bais.close()
                return bImageFromConvert
            }

String resizeToDimensions(byte[] imageData, String imageFormat, int width, int height){
            def  bimg = getBufferedImage(imageData)
            Map resizedImageData = resizeImage(bimg, width, height, imageFormat)
            return encodeImageToBase64(resizedImageData.imageBytes)
        }

now i am displaying the image like this < img src = "data:image/tif;base64,TU0AKgAAAAgADAEAAAMAAA...." /> with this i get failed to load url message(on hovering) as far as i know the base64 string usually starts with /9j/(may be i am wrong). when i am appending /9j/. I get an error - "image corrupt or truncated". I am not able to figure out the problem here, please help.

Answer 1

At first glance your use of the Data URI format looks correct -- try and narrow down exactly where the failure is.

I would recommend:

1. In your method where you return the string to the front end, I would recommend printing the entire thing out to the console to get the raw data in Data URI format.
2. Take the Data URI string, create a sample HTML file with the hard-coded value in it, try and load it... does the image display? If so, great, then your problem is with how you are streaming that back to the front end or how you are trying to load it. (Likely a JavaScript/DOM issue)
3. If that doesn't work, try and chop the Base64 section out of the example and save it into an example TXT file. In your Java code, load it, decode it and try and create an image out of it and write it back out to a TIFF -- if that didn't work, then there is something wrong with your Base64 handling and the encoding is invalid most likely.

Getting that far should answer most of the questions.

Actually now that I think about it, try and use ImageIO to read the image into a BufferedImage, then process it with imgscalr, then immediately call ImageIO.write and try and write it out to a new TIF someplace else and make sure the ImageIO decoding/encoding process is working correctly.

Hope that helps!