New: Support for JXL image format

Author: ollm

CHANGELOG.md

@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Improve chapter detection in tracking [`ad05a23`](https://github.com/ollm/OpenComic/commit/ad05a2364882227688cccfa2fdf58a21f8e9615c)
 - Support for `JP2` image format [`e11046b`](https://github.com/ollm/OpenComic/commit/e11046b4eca758f8b15c1caeb831a235a5f3d62c)
 - Support for `JXR` image format [`0e24922`](https://github.com/ollm/OpenComic/commit/0e2492264e1dbc94126c7d79e3e3c50fc426846c)
+- Support for `JXL` image format
 
 ## [v1.4.1](https://github.com/ollm/OpenComic/releases/tag/v1.4.1) (08-02-2025)
 

package-lock.json

@@ -90,8 +90,9 @@
 		"jpegxr": "^0.3.0",
 		"jquery": "^3.7.1",
 		"jquery-bez": "^1.0.11",
+		"jxl-oxide-wasm": "^0.11.1",
 		"lodash.isequal": "^4.5.0",
-		"mime": "^3.0.0",
+		"mime": "^4.0.6",
 		"mv": "^2.1.1",
 		"node-7z": "^3.0.0",
 		"node-scp": "^0.0.23",
@@ -134,6 +135,8 @@
 			"node_modules/7zip-bin/${os}/${arch}",
 			"node_modules/pdfjs-dist/build/pdf.mjs",
 			"node_modules/pdfjs-dist/build/pdf.worker.mjs",
+			"node_modules/mime",
+			"node_modules/jxl-oxide-wasm",
 			"images/icon-border-transparent.png",
 			"images/logo.png",
 			"images/logo.svg",

package.json

@@ -79,7 +79,6 @@ const electron = require('electron'),
 	hb = require('handlebars'),
 	os = require('os'),
 	ejs = require('electron-json-storage'),
-	mime = require('mime'),
 	sha1 = require('sha1'),
 	p = require('path'),
 	isEqual = require('lodash.isequal'),
@@ -143,6 +142,7 @@ var compatibleMime = [
 	'image/jpm',
 	'image/jxr',
 	'image/vnd.ms-photo',
+	'image/jxl',
 	'image/png',
 	'image/apng',
 	'image/svg',
@@ -166,6 +166,8 @@ var convertMime = [
 	// jxr
 	'image/jxr',
 	'image/vnd.ms-photo',
+	// jxl
+	'image/jxl',
 ];
 
 var compressedMime = {
@@ -279,6 +281,10 @@ var imageExtensions = {
 		'j2c',
 		'jpc',
 		'jpx',
+		'jxr',
+		'hdp',
+		'wdp',
+		'jxl',
 		'png',
 		'x-png',
 		'apng',
@@ -306,6 +312,8 @@ var imageExtensions = {
 		'jxr',
 		'hdp',
 		'wdp',
+		// jxl
+		'jxl',
 	],
 	jpg: [
 		'jpg',
@@ -331,6 +339,9 @@ var imageExtensions = {
 		'hdp',
 		'wdp',
 	],
+	jxl: [
+		'jxl',
+	],
 	png: [
 		'png',
 		'x-png',
@@ -471,6 +482,8 @@ window.onload = function() {
 
 async function startApp()
 {
+	await loadMime();
+
 	if(config.checkReleases)
 		checkReleases.check();
 
@@ -644,6 +657,18 @@ async function loadPdfjs()
 	return true;
 }
 
+var mime = false;
+
+async function loadMime()
+{
+	if(mime) return;
+
+	mime = await import(asarToAsarUnpacked(p.join(appDir, 'node_modules/mime/dist/src/index.js')));
+	mime = mime.default;
+
+	return true;
+}
+
 async function loadWebdav()
 {
 	let webdav = await import(asarToAsarUnpacked(p.join(appDir, 'node_modules/webdav/dist/web/index.js')));

scripts/opencomic.js

@@ -26,6 +26,20 @@ async function loadPdfjs()
 	return true;
 }
 
+JxlImage = false;
+
+async function loadJxlImage()
+{
+	if(JxlImage) return;
+
+	JxlImage = await import(asarToAsarUnpacked(p.join(__dirname, '..', 'node_modules/jxl-oxide-wasm/jxl_oxide_wasm.js')));
+
+	await JxlImage.default();
+	JxlImage = JxlImage.JxlImage;
+
+	return true;
+}
+
 self.addEventListener('message', async function(message) {
 
 	const data = message.data;

scripts/worker.js

@@ -81,6 +81,36 @@ async function jxr(path)
 	return false;
 }
 
+async function jxl(path)
+{
+	const buffer = fs.readFileSync(path);
+
+	if(JxlImage === false)
+		await loadJxlImage();
+
+	try
+	{
+		const image = new JxlImage();
+		image.feedBytes(buffer);
+
+		if(!image.tryInit())
+			throw new Error('Partial image, no frame data');
+
+		const renderResult = image.render();
+		const png = renderResult.encodeToPng();
+
+		return {
+			png: png,
+		};
+	}
+	catch(error)
+	{
+		return {error: error};
+	}
+
+	return false;
+}
+
 async function convert(path, mime)
 {
 	switch (mime)
@@ -97,6 +127,11 @@ async function convert(path, mime)
 
 			return jxr(path);
 
+			break;
+		case 'image/jxl':
+
+			return jxl(path);
+
 			break;
 	}
 

scripts/worker/convert-image.js

@@ -186,13 +186,13 @@ function convertBuffer(buffer, bits, bitsString = false)
 
 async function convertImage(path)
 {
-	const webpPath = fileManager.realPath(path);
+	const pngPath = fileManager.realPath(path);
 	const realPath = fileManager.realPath(path, -1);
 
-	fileManager.setTmpUsage(webpPath);
+	fileManager.setTmpUsage(pngPath);
 
-	if(fs.existsSync(webpPath))
-		return webpPath;
+	if(fs.existsSync(pngPath))
+		return pngPath;
 
 	const result = await work({
 		job: 'convertImage',
@@ -201,30 +201,38 @@ async function convertImage(path)
 		mime: mime.getType(realPath),
 	});
 
-	if(result.buffer)
-	{
-		const parentPath = p.dirname(webpPath);
+	const parentPath = p.dirname(pngPath);
 
-		if(!fs.existsSync(parentPath))
-			fs.mkdirSync(parentPath);
+	if(!fs.existsSync(parentPath))
+		fs.mkdirSync(parentPath);
 
+	if(result.buffer)
+	{
 		const bits = result.bits;
 
 		if(bits > 8 && result.buffer instanceof Uint8Array)
 			result.buffer = convertBuffer(result.buffer, bits, result.bitsString);
 
-		await image.rawToPng(result.buffer, webpPath, {
+		const raw = {
 			width: result.width,
 			height: result.height,
 			channels: result.channels,
 			rgb16: bits > 8 ? true : false,
 			premultiplied: result.premultiplied || false,
-		}, {
+		};
+
+		await image.rawToPng(result.buffer, pngPath, raw, {
 			compressionLevel: 2,
 			removeAlpha: result.removeAlpha,
 		});
 
-		return webpPath;
+		return pngPath;
+	}
+	else if(result.png && result.png instanceof Uint8Array)
+	{
+		fs.writeFileSync(pngPath, Buffer.from(result.png), function(){});
+
+		return pngPath;
 	}
 
 	if(result.error)