Question:
I am working on a requirement to display multi-page tiff image in a web application. We have been exploring the new canvas feature of html5 but find that handling multiple pages in the tiff image using canvas a bit of challenge. Please share some ideas in resolving this which would be a great help. You may direct me to javascript or such other resources that might help addressing this. Thanks in advance.
By: Nilima Jain
Answer:
Though most browsers support the canvas feature of HTML5, the tiff format is not supported by all browsers, though IE supports it. So, first ensure you have an agreement on the supported browsers for which you are building this feature, or else you would need a plugin / control for handling tiff images. If you are taking the plugin or activex or applet route, then you have the liberty to make use of some of the client libraries and expose methods to interact with javascript calls from the browser and you are done.
Just in case you are fine with the browser support and are looking for using canvas for handling tiff, then try exploring the tiff.js library. Google also has a code library called tiffus. But I have not personally explored these libaries and you may spend some time trying out these whether these are of any help.
The other approach could be to try out the following approach:
Have a server side component with service APIs to be able to split the pages in the tiff image into multiple jpg images of the same resolution. This service API when queried without any specific page number would load the tiff image and have the pages parsed as individual images and would return the binary of the first page as jpg format. Similarly, the API, when queried with a specific page, it would ensure returning the specific page. The challenge with this approach would be that there would be more hits between the client and server. This can however be optimized by handling this process in-memory and thus minimizing the disk i/o on the server. This approach is likely to work with all browsers and the canvas feature can be leveraged as well.
However, if you have a specific browser to work with, for instance Internet Explorer, the best and easy approach would be to build an ActiveX control and wrapping the tiff image handling within it. In this case, the native windows imaging components might just suffice and no need for a third party library to handle the multi-page tiff image. This ActiveX component should expose necessary APIs, which can be invoked by javascript in response to various events at the client side.
There are quite a few third party commercial libraries to meet this need too.
I am working on a requirement to display multi-page tiff image in a web application. We have been exploring the new canvas feature of html5 but find that handling multiple pages in the tiff image using canvas a bit of challenge. Please share some ideas in resolving this which would be a great help. You may direct me to javascript or such other resources that might help addressing this. Thanks in advance.
By: Nilima Jain
Answer:
Though most browsers support the canvas feature of HTML5, the tiff format is not supported by all browsers, though IE supports it. So, first ensure you have an agreement on the supported browsers for which you are building this feature, or else you would need a plugin / control for handling tiff images. If you are taking the plugin or activex or applet route, then you have the liberty to make use of some of the client libraries and expose methods to interact with javascript calls from the browser and you are done.
Just in case you are fine with the browser support and are looking for using canvas for handling tiff, then try exploring the tiff.js library. Google also has a code library called tiffus. But I have not personally explored these libaries and you may spend some time trying out these whether these are of any help.
The other approach could be to try out the following approach:
Have a server side component with service APIs to be able to split the pages in the tiff image into multiple jpg images of the same resolution. This service API when queried without any specific page number would load the tiff image and have the pages parsed as individual images and would return the binary of the first page as jpg format. Similarly, the API, when queried with a specific page, it would ensure returning the specific page. The challenge with this approach would be that there would be more hits between the client and server. This can however be optimized by handling this process in-memory and thus minimizing the disk i/o on the server. This approach is likely to work with all browsers and the canvas feature can be leveraged as well.
However, if you have a specific browser to work with, for instance Internet Explorer, the best and easy approach would be to build an ActiveX control and wrapping the tiff image handling within it. In this case, the native windows imaging components might just suffice and no need for a third party library to handle the multi-page tiff image. This ActiveX component should expose necessary APIs, which can be invoked by javascript in response to various events at the client side.
There are quite a few third party commercial libraries to meet this need too.
