aria/aria.coffee
1
0
Fork 0
Code Issues Pull requests Projects 1 Releases Packages Wiki Activity Actions

Add JXL decoder and test page

Browse source
This commit is contained in:
Aria 2025-03-19 08:19:25 +11:00
parent 983ae3ae80
commit 6e55b498f8
Signed by untrusted user who does not match committer: aria
GPG key ID: 19AB7AA462B8AB3B
8 changed files with 80 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
public/jxl.min.js vendored Normal file
View file

@ -0,0 +1 @@
!function(){"use strict";let e={useCache:!0,imageType:"jpeg"},a,t={};function s(s,i,n,r){let l=s.dataset.jxlSrc;if(i instanceof Blob)c(s,URL.createObjectURL(i),n,r);else if("OffscreenCanvas"in window){let d=new OffscreenCanvas(i.width,i.height);t[l].postMessage({canvas:d,imgData:i,imageType:e.imageType},[d]),t[l].addEventListener("message",t=>{t.data.url&&t.data.blob&&(c(s,t.data.url,n,r),e.useCache&&a&&a.put(l,new Response(t.data.blob)))})}else{let g=document.createElement("canvas");g.width=i.width,g.height=i.height,g.getContext("2d").putImageData(i,0,0),g.toBlob(t=>{c(s,URL.createObjectURL(t),n,r),e.useCache&&a&&a.put(l,new Response(t))},"image/"+e.imageType)}}function c(a,t,s,c){s?a.style.backgroundImage='url("'+t+'")':c?(a.srcset=t,a.type="image/"+e.imageType):a.src=t}async function i(c,i,n){let r=c.dataset.jxlSrc=i?getComputedStyle(c).backgroundImage.slice(5,-2):n?c.srcset:c.currentSrc;if(i||n||(c.srcset="",c.src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="),e.useCache){try{a=a||await caches.open("jxl")}catch(l){}let d=a&&await a.match(r);if(d){let g=await d.blob();requestAnimationFrame(()=>s(c,g,i,n));return}}let o=await fetch(r),u=await o.arrayBuffer();t[r]=new Worker("jxl_dec.js"),t[r].postMessage({jxlSrc:r,image:u}),t[r].addEventListener("message",e=>e.data.imgData&&requestAnimationFrame(()=>s(c,e.data.imgData,i,n)))}new MutationObserver(e=>e.forEach(e=>e.addedNodes.forEach(e=>{e instanceof HTMLImageElement&&e.src.endsWith(".jxl")?e.onerror=()=>i(e,!1,!1):e instanceof HTMLSourceElement&&e.srcset.endsWith(".jxl")?i(e,!1,!0):e instanceof Element&&getComputedStyle(e).backgroundImage.endsWith('.jxl")')&&i(e,!0,!1)}))).observe(document.documentElement,{subtree:!0,childList:!0})}();

2
public/jxl_dec.js Normal file
View file

File diff suppressed because one or more lines are too long

BIN
public/jxl_dec.wasm Normal file
View file

Binary file not shown.

BIN
public/static/img/sites/avatar.avif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1 MiB

BIN
public/static/img/sites/avatar.jxl Normal file
View file

Binary file not shown.

3
src/components/jxl-loader.astro Normal file
View file

@ -0,0 +1,3 @@
<link rel="prefetch" href="/jxl_dec.js" fetchpriority="high">
<link rel="prefetch" href="/jxl_dec.wasm" fetchpriority="high">
<script src="/jxl.min.js" type="text/javascript"></script>

43
src/layouts/BaseLayoutJxl.astro Normal file
View file

@ -0,0 +1,43 @@
---
import Favicon from "../components/Favicon.astro";
import Footer from "../components/Footer.astro";
import NavHeader from "../components/NavHeader.astro";
import "../styles/aria.css";
import EmbedCode from "../components/EmbedCode.astro";
import JxlLoader from "../components/jxl-loader.astro";
const { pageTitle, description = "Aria's little corner of the web" } = Astro.props;
---
<!doctype html>
<html lang="en">
<head>
<Favicon />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<meta name="description" content={description}>
<title>{pageTitle}</title>
<EmbedCode pageTitle={pageTitle} description={description} />
<link rel="preconnect" href="https://transring.neocities.org" />
<link rel="dns-prefetch" href="https://transring.neocities.org" />
<link rel="preload" as="script" href="https://transring.neocities.org/ring.js">
<link rel="preload" as="image" href="https://transring.neocities.org/widget/trans/button.png">
<link rel="preload" as="image" href="https://transring.neocities.org/widget/trans/left.png">
<link rel="preload" as="image" href="https://transring.neocities.org/widget/trans/right.png">
<JxlLoader />
<link
rel="alternate"
type="application/rss+xml"
title="Aria's blog"
href={new URL("rss.xml", Astro.site)}
/>
</head>
<body>
<NavHeader />
<slot />
<Footer />
</body>
</html>

31
src/pages/jxl-testing.astro Normal file
View file

@ -0,0 +1,31 @@
---
import Partition from "../components/Partition.astro";
import BaseLayoutJxl from "../layouts/BaseLayoutJxl.astro";
import BaseLayout from "../layouts/BaseLayout.astro";
const pageTitle = "Testing JpegXL support!";
---
<BaseLayoutJxl pageTitle={pageTitle}>
<Partition>
<h1 class="text-4xl font-bold">{pageTitle}</h1>
</Partition>
<Partition>
<h2 class="text-3xl font-bold">About</h2>
<p>I found <a href="https://github.com/niutech/jxl.js" target="_blank">this</a> neat snippet of code for adding </p>
</Partition>
<Partition>
<h3 class="text-2xl text-center font-bold">PNG:</h2>
<img src="/static/img/sites/avatar.png" />
</Partition>
<Partition>
<h3 class="text-2xl text-center font-bold">AVIF:</h2>
<img src="/static/img/sites/avatar.avif" />
</Partition>
<Partition>
<h3 class="text-2xl text-center font-bold">JXL:</h2>
<img src="/static/img/sites/avatar.jxl" />
</Partition>
</BaseLayoutJxl>