Multi-channel support- Week 7 to 9
In this article, I will share my progress after the mid-term evaluations. I was on leave for Week 7 for some reason, and I informed my mentor in advance.
Week 8 and Week 9 progress have been productive. Also moving into the final phase, I have created a new repository for our project: Multi-channel Imagin support. As an Image processing researcher, I enjoyed these weeks playing around with JavaScript objects and the Open Source library.
Integrating OpenSeaDragon and Deep Zoom Image(DZI) with Python Flask
In the field of medical image processing, technological advancements are constantly shaping the way healthcare professionals analyze and interpret complex medical images.
One such breakthrough is the utilization of the Deep Zoom Image (DZI) format in conjunction with OpenSeaDragon, a powerful open-source image viewer.
What is DZI and OpenSeaDragon?
DZI
Deep Zoom Image (DZI) is a specialized image format and a technology developed by Microsoft. It allows for the efficient display and navigation of high-resolution images over the web. The key feature of DZI is its ability to enable smooth, fluid zooming into images of varying resolutions without the need to load the entire image at once. Instead, the image is divided into smaller tiles at different levels of detail.
As users zoom in or out, the viewer dynamically loads the necessary tiles, providing a seamless and responsive experience. This format is especially beneficial for images with extremely high resolutions, such as those generated by medical imaging equipment like MRIs, CT scans, and histopathological slides.
OpenSeaDragon
OpenSeaDragon is an open-source JavaScript library that allows developers to create highly customizable, web-based zoomable image viewers. It is built to seamlessly integrate with the DZI format, providing a user-friendly interface for navigating and exploring large images. OpenSeaDragon enables smooth and intuitive zooming and panning functionality, making it well-suited for interactive exploration of medical images. Its versatility extends to supporting annotations, overlays, and various plugins, enhancing the capabilities of medical professionals and researchers.
Why is it important and how it is used in our project?
Medical images often contain intricate details that are crucial for accurate diagnosis and treatment planning. DZI and OpenSeaDragon enable healthcare professionals to zoom in on specific regions of interest within the image without losing image quality, facilitating thorough analysis.
For our project, the main idea was to use DZI and OpenSeaDragon to effectively load the image. Traditional methods of loading high-resolution medical images can be time-consuming and resource-intensive. DZI’s tile-based approach and OpenSeaDragon’s dynamic loading ensure that only the necessary parts of the image are fetched, reducing loading times and optimizing resource usage.
Code Implementation
First, I had to decide which is the best platform to convert the output image to a small collection of tiles. For the first few days, I explored the OpenSlide Imaging library. One downside of using this library was that it supports only .SVS image files.
Then I finally got to know about the Linux command that converts the tiff/mat/png/jpg image file into the .dzi (XML code) and dzi_files (directory with tiles image)
Convert image into DZI tiles
We can convert the image into a deep zoom image by using pyvips, an Image processing Python library.
import pyvips
input_image = pyvips.Image.new_from_file("uploaded/44153.tif")
output_filename = "uploaded/44153.dzi"
input_image.dzsave(output_filename)
Let’s understand the above image. Once the tiff/mat/png/jpeg file is converted into tiles, it creates <name>.dzi which has some XML code and <name>_files directory. Inside this directory, there are subdirectories which as known as levels. Inside the level directory, the image is saved in row_column.jpeg naming format.
Using uuid to save DZI images in Flask static
@app.route('/viewer/<filename>', methods=['GET'])
def view_image(filename):
uid = uuid4().hex
uploaded_path = os.path.join("uploaded",filename)
converted_img = convert_channel_api(uploaded_path)
input_image = pyvips.Image.new_from_buffer(converted_img,"")
output_directory = f"static/{uid}"
input_image.dzsave(output_directory)
path = f"{uid}.dzi"
session['output_directory'] = output_directory
return render_template('viewer.html', dzi_path=path)Integrating Deep Zoom Image (DZI) to OpenSeaDragon using Python Flask
Since OpenSeaDragon is a JavaScript. This is where the .dzi file is been used. Let's look into what exactly a .dzi file contains.
<?xml version="1.0" encoding="UTF-8"?>
<Image xmlns="http://schemas.microsoft.com/deepzoom/2008"
Format="jpeg"
Overlap="1"
TileSize="254"
>
<Size
Height="1020"
Width="954"
/>
</Image>Now we need to provide this static path link to the OpenSeaDragon javascript object inside the viewer.html.
<div id="openseadragon-viewer">
</div>
<script type="text/javascript">
var dziPath = "{{ dzi_path }}";
const viewer = OpenSeadragon({
id: "openseadragon-viewer",
prefixUrl: "{{ url_for('static', filename='openseadragon/images/') }}",
tileSources:"../static/"+dziPath,
preserveViewport: true,
visibilityRatio: 1,
defaultZoomLevel: 0,
maxZoomPixelRatio: 1
});
</script>
As you can see in the inspect-> network, one every zoom the Name i.e., image tile is refreshed.
Display tile route in the browser
As mentioned earlier, each image is sub-categorized into levels, rows and columns. Use the Flask session to get the unique path where the dzi and tile files are located.
@app.route('/gettile/<int:level>/<int:col>/<int:row>')
def get_tile(level, col, row):
dzi_path = session.get('output_directory')
#print(dzi_path)
tile_path = f"{dzi_path}_files/{level}/{col}_{row}.jpeg"
#print(tile_path)
try:
return send_file(tile_path, mimetype='image/jpeg')
except FileNotFoundError:
placeholder_image_path = "path_to_placeholder_image.jpg"
return send_file(placeholder_image_path, mimetype='image/jpeg')
Full code implementation only on Github: https://github.com/lucifertrj/GSoC23_multi_channel
Conclusion
The combination of DZI and OpenSeaDragon has ushered in a new era of medical image processing, offering enhanced visualization, analysis, and collaboration capabilities. This technology empowers medical professionals to delve into the intricacies of high-resolution medical images, ultimately leading to more accurate diagnoses, better treatment decisions, and improved patient outcomes. As these tools continue to evolve, they hold the promise of further transforming the landscape of healthcare and medical research.
LinkedIn: https://www.linkedin.com/in/jaintarun75/
GitHub: https://github.com/lucifertrj/
Twitter: https://twitter.com/TRJ_0751
