Skip to main content

2 posts tagged with "coding"

View All Tags

Hidden Art of Unclamping jxlart Artworks

Kampidh
Kampidh

Background Story​

On my post about JPEG XL color analysis I mentioned that JXL stores lossy XYB in absolute, float values that can be requested during decoding process by calling pixel format data_type as JXL_TYPE_FLOAT, where out-of-gamut colors are represented with negative values.

I was recently encouraged by Amyspark from Krita to write my python Color Gamut Plotter to something native, like Qt or web-based. As I also doing hacks and sometimes contributing to Krita as well, I took the Qt path as a base. Furthermore, I'm still more comfortable coding with C/C++ rather than JS, might as well training more with Qt~ :3

Fiddling With Docusaurus

Kampidh
Kampidh

depends on how you view it, but I don't feel like reinventing a wheel just to make a static blog site. haha
On the positive side, I can throw JPEG-XL images here too and get it rendered on supported browsers, yay!

![Spectral Zephyr](./zeph-spectral.jxl)

Spectral Zephyr

zooming

May break on JXL-unsupported browsers if you try to zoom a broken/unrendered image and may freeze the page! For example I use react-medium-image-zoom plugin for image zooming in this page.

Although Docusaurus always complains a lot during compile time:

[WARNING] The image at "{path_to_image.jxl}" can't be read correctly. Please ensure it's a valid image.
unsupported file type: undefined (file: {path_to_image.jxl})

And nope, using JSX didn't work either...

ERROR in {path_to_image.jxl} 1:0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

So yeah, sadly <picture> tag didn't work with JXL here either!

EDIT: Found some workaround yay!​

  • The first one is to insert file-loader! before the URL, for example image below:

    <picture>
        <source srcSet={require("file-loader!./dv-nebia-nevia-sub.jxl").default} type="image/jxl"/>
        <img src={require("./dv-nebia-nevia-sub.jpg").default} width="100%" />
    </picture>

    However, this method requires a manual insertion for each <picture> tag and will strip any filenames (which is sad!). If the image is still broken, use !!file-loader! instead. Or maybe Docusaurus already fixed the module on the next method!

  • The second method requires to fiddle with Docusaurus' webpackUtils source which will use the internal parsing and keeping the filename intact:

    On node_modules, find webpackUtils.js and/or webpackUtils.ts. In my case it's on node_modules/@docusaurus/utils/lib/. Open the file and find getFileLoaderUtils() function, on const rules variable find image field and add jxl to the list:

    images: () => ({
        use: [loaders.url({ folder: 'images' })],
        test: /\.(?:ico|jpe?g|png|gif|webp|avif|jxl)(?:\?.*)?$/i,
    }),

    This way we don't need to add file-loader! and just add an URL like usual!

    <picture>
        <source srcSet={require("./dv-nebia-nevia-sub.jxl").default} type="image/jxl"/>
        <img src={require("./dv-nebia-nevia-sub.jpg").default} width="100%" />
    </picture>

Example result:

And there you have it! JPEG XL-enabled Docusaurus with fallback image!

Spare me, I'm still a total noob in node.js development... I'm not even sure if those methods are safe, please ping me if you found something!