next-blurhash-previews 0.0.3-beta31 → 0.0.3-beta34

package/bin/generateBlurhash.js

@@ -18,24 +18,10 @@ export async function getSharpImage(imgPath) {
 }
 
 export async function getBlurhash(path) {
-  let blurhashImage = await getSharpImage(path);
+  const blurhashImage = await getSharpImage(path);
   const dimensions = await blurhashImage.metadata();
 
   const { width, height } = dimensions;
-  let blurhashW = width;
-  let blurhashH = height;
-
-  if (width > 200) {
-    const newBuffer = await blurhashImage.resize(200).toBuffer();
-    blurhashImage = sharp(newBuffer);
-
-    let newMetadata = await blurhashImage.metadata();
-    blurhashW = newMetadata.width;
-    blurhashH = newMetadata.height;
-    console.log("Adjustied", blurhashW, blurhashH);
-  } else {
-    console.log("Not adjusting", path, width);
-  }
 
   return new Promise((res, rej) => {
     blurhashImage
@@ -48,19 +34,13 @@ export async function getBlurhash(path) {
           } else {
             const blurhash = encode(
               new Uint8ClampedArray(buffer),
-              blurhashW,
-              blurhashH,
+              width,
+              height,
               4,
               4
             );
             if (isBlurhashValid(blurhash)) {
-              return res({
-                blurhash,
-                dw: width,
-                dh: height,
-                w: blurhashW,
-                h: blurhashH,
-              });
+              return res({ blurhash, w: width, h: height });
             } else {
               console.log("FAIL");
               return rej("FAIL");

package/components/ImageWithPreview.tsx

@@ -1,12 +1,6 @@
 import { decode } from "../node_modules/blurhash/dist/esm/index";
 
-type blurhash = {
-  w: number;
-  h: number;
-  dw: number;
-  dh: number;
-  blurhash: string;
-};
+type blurhash = { w: number; h: number; blurhash: string };
 
 class ImageWithPreview extends HTMLElement {
   sd: ShadowRoot;
@@ -55,23 +49,18 @@ class ImageWithPreview extends HTMLElement {
   }
 
   #imgLoad = () => {
-    //this.sd.innerHTML = `<slot name="image"></slot>`;
+    this.sd.innerHTML = `<slot name="image"></slot>`;
   };
 
   attributeChangedCallback(name) {
     if (this.#canvasEl && name === "preview") {
-      const time = this.#updatePreview();
-      console.log(this.getAttribute("preview"), this.getAttribute("url"), time);
+      this.#updatePreview();
     }
   }
 
   #updatePreview() {
     const previewObj = JSON.parse(this.getAttribute("preview")!);
-
-    const start = +new Date();
     updateBlurHashPreview(this.#canvasEl, previewObj);
-    const end = +new Date();
-    return end - start;
   }
 }
 
@@ -80,14 +69,20 @@ if (!customElements.get("blurhash-image")) {
 }
 
 function updateBlurHashPreview(canvasEl: HTMLCanvasElement, preview: blurhash) {
-  const { w, h, dw, dh } = preview;
+  const { w: width, h: height, blurhash } = preview;
+
+  const worker = new Worker("/canvas-worker.js");
 
-  canvasEl.width = dw;
-  canvasEl.height = dh;
+  const offscreen = (canvasEl as any).transferControlToOffscreen();
+  worker.postMessage({ canvas: offscreen, width, height, blurhash }, [
+    offscreen,
+  ]);
+  canvasEl.width = width;
+  canvasEl.height = height;
 
-  const pixels = decode(preview.blurhash, w, h);
+  const pixels = decode(blurhash, width, height);
   const ctx = canvasEl.getContext("2d")!;
-  const imageData = ctx.createImageData(dw, dh);
+  const imageData = ctx.createImageData(width, height);
   imageData.data.set(pixels);
   ctx.putImageData(imageData, 0, 0);
 }

package/imagePreviewBootstrap.js

@@ -1,5 +1,5 @@
 import { createElement } from "react";
 
 export const imagePreviewBootstrap = createElement("script", {
-  dangerouslySetInnerHTML: { __html: `(() => { "use strict";const R=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","#","$","%","*","+",",","-",".",":",";","=","?","@","[","]","^","_","{","|","}","~"],u=t=>{let e=0;for(let s=0;s<t.length;s++){const n=t[s],r=R.indexOf(n);e=e*83+r}return e},p=t=>{let e=t/255;return e<=.04045?e/12.92:Math.pow((e+.055)/1.055,2.4)},v=t=>{let e=Math.max(0,Math.min(1,t));return e<=.0031308?Math.round(e*12.92*255+.5):Math.round((1.055*Math.pow(e,.4166666666666667)-.055)*255+.5)},D=t=>t<0?-1:1,x=(t,e)=>D(t)*Math.pow(Math.abs(t),e);class A extends Error{constructor(e){super(e),this.name="ValidationError",this.message=e}}const L=t=>{if(!t||t.length<6)throw new A("The blurhash string must be at least 6 characters");const e=u(t[0]),s=Math.floor(e/9)+1,n=e%9+1;if(t.length!==4+2*n*s)throw new A(\`blurhash length mismatch: length is \${t.length} but it should be \${4+2*n*s}\`)},G=t=>{const e=t>>16,s=t>>8&255,n=t&255;return[p(e),p(s),p(n)]},I=(t,e)=>{const s=Math.floor(t/361),n=Math.floor(t/19)%19,r=t%19;return[x((s-9)/9,2)*e,x((n-9)/9,2)*e,x((r-9)/9,2)*e]},T=(t,e,s,n)=>{L(t),n=n|1;const r=u(t[0]),a=Math.floor(r/9)+1,c=r%9+1,d=(u(t[1])+1)/166,g=new Array(c*a);for(let o=0;o<g.length;o++)if(o===0){const i=u(t.substring(2,6));g[o]=G(i)}else{const i=u(t.substring(4+o*2,6+o*2));g[o]=I(i,d*n)}const l=e*4,h=new Uint8ClampedArray(l*s);for(let o=0;o<s;o++)for(let i=0;i<e;i++){let C=0,q=0,y=0;for(let m=0;m<a;m++)for(let f=0;f<c;f++){const b=Math.cos(Math.PI*i*f/e)*Math.cos(Math.PI*o*m/s);let M=g[f+m*c];C+=M[0]*b,q+=M[1]*b,y+=M[2]*b}let B=v(C),E=v(q),P=v(y);h[4*i+0+o*l]=B,h[4*i+1+o*l]=E,h[4*i+2+o*l]=P,h[4*i+3+o*l]=255}return h};class O extends HTMLElement{sd;mo;static observedAttributes=["preview"];get#t(){return this.querySelector("img")}get#e(){return this.querySelector("canvas")}constructor(){super(),this.sd=this.attachShadow({mode:"open"}),this.sd.innerHTML='<slot name="preview"></slot>'}#s=()=>{if(this.#t&&this.#e)return this.mo?.disconnect(),this.#t.complete?this.#n():(this.#o(),this.#t.addEventListener("load",this.#n)),!0};connectedCallback(){this.#s()||(this.mo=new MutationObserver(this.#s),this.mo.observe(this,{subtree:!0,childList:!0,attributes:!1}))}#n=()=>{};attributeChangedCallback(e){if(this.#e&&e==="preview"){const s=this.#o();console.log(this.getAttribute("preview"),this.getAttribute("url"),s)}}#o(){const e=JSON.parse(this.getAttribute("preview")),s=+new Date;return S(this.#e,e),+new Date-s}}customElements.get("blurhash-image")||customElements.define("blurhash-image",O);function S(t,e){const{w:s,h:n,dw:r,dh:a}=e;t.width=r,t.height=a;const c=T(e.blurhash,s,n),w=t.getContext("2d"),d=w.createImageData(r,a);d.data.set(c),w.putImageData(d,0,0)} })();` },
+  dangerouslySetInnerHTML: { __html: `(() => { "use strict";const T=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","#","$","%","*","+",",","-",".",":",";","=","?","@","[","]","^","_","{","|","}","~"],d=t=>{let e=0;for(let s=0;s<t.length;s++){const n=t[s],i=T.indexOf(n);e=e*83+i}return e},b=t=>{let e=t/255;return e<=.04045?e/12.92:Math.pow((e+.055)/1.055,2.4)},p=t=>{let e=Math.max(0,Math.min(1,t));return e<=.0031308?Math.round(e*12.92*255+.5):Math.round((1.055*Math.pow(e,.4166666666666667)-.055)*255+.5)},k=t=>t<0?-1:1,v=(t,e)=>k(t)*Math.pow(Math.abs(t),e);class B extends Error{constructor(e){super(e),this.name="ValidationError",this.message=e}}const E=t=>{if(!t||t.length<6)throw new B("The blurhash string must be at least 6 characters");const e=d(t[0]),s=Math.floor(e/9)+1,n=e%9+1;if(t.length!==4+2*n*s)throw new B(\`blurhash length mismatch: length is \${t.length} but it should be \${4+2*n*s}\`)},A=t=>{const e=t>>16,s=t>>8&255,n=t&255;return[b(e),b(s),b(n)]},G=(t,e)=>{const s=Math.floor(t/361),n=Math.floor(t/19)%19,i=t%19;return[v((s-9)/9,2)*e,v((n-9)/9,2)*e,v((i-9)/9,2)*e]},I=(t,e,s,n)=>{E(t),n=n|1;const i=d(t[0]),l=Math.floor(i/9)+1,c=i%9+1,g=(d(t[1])+1)/166,a=new Array(c*l);for(let o=0;o<a.length;o++)if(o===0){const r=d(t.substring(2,6));a[o]=A(r)}else{const r=d(t.substring(4+o*2,6+o*2));a[o]=G(r,g*n)}const h=e*4,u=new Uint8ClampedArray(h*s);for(let o=0;o<s;o++)for(let r=0;r<e;r++){let C=0,q=0,y=0;for(let m=0;m<l;m++)for(let f=0;f<c;f++){const w=Math.cos(Math.PI*r*f/e)*Math.cos(Math.PI*o*m/s);let M=a[f+m*c];C+=M[0]*w,q+=M[1]*w,y+=M[2]*w}let L=p(C),P=p(q),R=p(y);u[4*r+0+o*h]=L,u[4*r+1+o*h]=P,u[4*r+2+o*h]=R,u[4*r+3+o*h]=255}return u};class O extends HTMLElement{sd;mo;static observedAttributes=["preview"];get#t(){return this.querySelector("img")}get#e(){return this.querySelector("canvas")}constructor(){super(),this.sd=this.attachShadow({mode:"open"}),this.sd.innerHTML='<slot name="preview"></slot>'}#s=()=>{if(this.#t&&this.#e)return this.mo?.disconnect(),this.#t.complete?this.#n():(this.#o(),this.#t.addEventListener("load",this.#n)),!0};connectedCallback(){this.#s()||(this.mo=new MutationObserver(this.#s),this.mo.observe(this,{subtree:!0,childList:!0,attributes:!1}))}#n=()=>{this.sd.innerHTML='<slot name="image"></slot>'};attributeChangedCallback(e){this.#e&&e==="preview"&&this.#o()}#o(){const e=JSON.parse(this.getAttribute("preview"));D(this.#e,e)}}customElements.get("blurhash-image")||customElements.define("blurhash-image",O);function D(t,e){const{w:s,h:n,blurhash:i}=e,l=new Worker("/canvas-worker.js"),c=t.transferControlToOffscreen();l.postMessage({canvas:c,width:s,height:n,blurhash:i},[c]),t.width=s,t.height=n;const x=I(i,s,n),g=t.getContext("2d"),a=g.createImageData(s,n);a.data.set(x),g.putImageData(a,0,0)} })();` },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-blurhash-previews",
-  "version": "0.0.3-beta31",
+  "version": "0.0.3-beta34",
   "description": "",
   "main": "index.js",
   "module": "index.js",