Question about JPX image converter

[YuanTian1991]

Hi, I find this repo by following your issue here. I am facing a similar problem that converting JP2 images to a browser-displable image.

However, I can't successfully load the jpx javascript script like you did here.

I encounter errors like:

'PDFJS' is not defined

and

Expected an assignment or function call and instead saw an expression

I am working on Electron + React App, not sure if you encountered these error before. Any help would be very much appreciated.

Sorry maybe my question is native, I am not good at JS, and well done on the plotly, I use it a lot in my R Shiny project.

[archmoj]

Could you possibly share a codepen?

[YuanTian1991]

Hi, thanks for your answer. I managed to quickly create a React CodeSanbox here.

Embarrassingly I did not see the error that exist in my Electron+React project, however, it's also still not working as I expected, seems failed to parse my JP2 example.

Thank you again so much for your patient help. What I am asking is actually the JPX function, which is not your responsibility to answer I understand that.

[archmoj]

You may replace require with native ES6 import.

import "./assets/jpeg2000/jpx.min.js"

[YuanTian1991]

Thanks for your answer, I will try later, seems in my demo, the JP2 did not load successfully.

[YuanTian1991]

Hi Mojtaba:

I managed to get it working and seems the parse for JP2 is now scuccess. However, I can't fully understand the output format, there are 16 tiles, how can I get PNG (or base64) from these tiles? I see in your code, you just used the first element in the array right?

Again, thanks a lot for your very kind help!

[archmoj]

What is the type of raw data you want to extract? Grib2 or Jpeg2000?

[YuanTian1991]

JPEG2000, I included am example in the CodeSanbox I created. In src/assets/jp2Image/a9he6.jp2. My target is to convert this file into normal PNG/JPEG.

[archmoj]

Hi Mojtaba:

I managed to get it working and seems the parse for JP2 is now scuccess. However, I can't fully understand the output format, there are 16 tiles, how can I get PNG (or base64) from these tiles? I see in your code, you just used the first element in the array right?

Again, thanks a lot for your very kind help!

The data possibly in RGB format is extracted in tiles.
For example considering first tile which has widthXheight=640×480 you've got 640×480×3 numbers in its item.

[archmoj]

So you have the high-res bitmap not a compressed PNG.

[YuanTian1991]

Thanks @archmoj , I am quite new for image format.

My feeling is the whole picture is 2048 * 1536, because that's what the Mac OS preview tell me, and each tile is part of the image. As you pointed, each tile contains items exactly 3tile.withtile.height. So I guess the way to get the whole image, is to firstly convert this Unit16Array, to RBG in each tile, and put all tiles togather into an origin image...

I found an example here. Trying to do something similar, but my canvas eventually show totally black, nothing seems work.

Thanks for your kind help!

[archmoj]

What is the final goal of your app? Is it to display an static image on the screen? Or to use plotly to display an interactive image? Or perform calculations on numerical data encoded in jpeg2000 format?

[YuanTian1991]

The ultimate goal is to use Konva.js to annotate image. I have tested it works well for statics png/jpg. So now what I want to do, is to convert jpeg2000 to normal jpg/png format, then fit into the image annotator. So it is more likely to "display the statics image on electron app".

No plotly will be used in my project.

[archmoj]

OK. Could you please share an updated/working codepen? Then you'll need some Javascript to convert to b64. I may be able to have a closer look in the following days if that's not urgent.

[YuanTian1991]

Thank you so much! I will update the CodeSandbox tomorrow.

[YuanTian1991]

Hi @archmoj:

Sorry for the late reply. I was too busy before.

Thanks for your previous help. I have solved my problem, which means I successfully get image (in base64 format) from origin JP2 binary data. I will later create an online demo for you and the future developers who might be interested.