next-blurhash-previews 0.0.3-beta54 → 0.0.3-beta57

package/bin/generateBlurhash.js

@@ -1,8 +1,10 @@
+import fs from "fs";
+import path from "path";
+
 import sharp from "sharp";
 import fetch from "node-fetch";
 import { encode, isBlurhashValid } from "blurhash";
 
-import path from "path";
 const __dirname = process.cwd();
 
 export async function getSharpImage(imgPath) {
@@ -13,6 +15,18 @@ export async function getSharpImage(imgPath) {
 
     return sharp(buffer);
   } else {
+    const ext = path.extname(imgPath);
+    const dir = path.dirname(imgPath);
+    const basename = path.basename(imgPath, ext);
+
+    const previewOption = path.join(dir, basename + "-preview", ext);
+    console.log("Trying preview", previewOption);
+
+    if (fs.existsSync()) {
+      console.log("Preview found");
+      return sharp(previewOption);
+    }
+
     return sharp(imgPath);
   }
 }

package/components/workerScript.ts

@@ -5,16 +5,13 @@ addEventListener("message", evt => {
 
   const { canvas, width, height, blurhash } = evt.data;
 
-  const p = new Promise(res => setTimeout(res, 5000));
-  Promise.resolve(p).then(() => {
-    console.log("Encoding", blurhash);
-    const start = +new Date();
-    const pixels = decode(blurhash, width, height);
-    const ctx = canvas.getContext("2d");
-    const imageData = ctx.createImageData(width, height);
-    imageData.data.set(pixels);
-    ctx.putImageData(imageData, 0, 0);
-    const end = +new Date();
-    console.log("Done Encoding", blurhash, end - start);
-  });
+  console.log("Encoding", blurhash);
+  const start = +new Date();
+  const pixels = decode(blurhash, width, height);
+  const ctx = canvas.getContext("2d");
+  const imageData = ctx.createImageData(width, height);
+  imageData.data.set(pixels);
+  ctx.putImageData(imageData, 0, 0);
+  const end = +new Date();
+  console.log("Done Encoding", blurhash, end - start);
 });

package/imagePreviewBootstrap.js

@@ -4,11 +4,299 @@ export const imagePreviewBootstrap = createElement(
   Fragment,
   {},
   createElement("script", {
-    dangerouslySetInnerHTML: { __html: `(() => { "use strict";class a extends HTMLElement{sd;mo;static observedAttributes=["preview"];#s=!1;get#e(){return this.querySelector("img")}get#t(){return this.querySelector("canvas")}constructor(){super(),this.sd=this.attachShadow({mode:"open"}),this.sd.innerHTML='<slot name="preview"></slot>'}#i=()=>{if(this.#e&&this.#t)return this.mo?.disconnect(),this.#e.complete?this.#r():(this.#h(),this.#e.addEventListener("load",this.#r)),1};connectedCallback(){this.#s=!0,this.#i()||(this.mo=new MutationObserver(this.#i),this.mo.observe(this,{subtree:!0,childList:!0,attributes:!1}))}#r=()=>{this.sd.innerHTML='<slot name="image"></slot>'};attributeChangedCallback(e){this.#t&&e==="preview"&&this.#h()}#h(){if(!this.#s||!this.getAttribute("preview"))return;const e=JSON.parse(this.getAttribute("preview"));c(this.#t,e)}}customElements.get("blurhash-image")||customElements.define("blurhash-image",a);function c(t,e){const{w:s,h:i,blurhash:h}=e;t.width=s,t.height=i;{const n=new Blob([document.querySelector("#next-blurhash-worker-script").textContent],{type:"text/javascript"}),o=new Worker(window.URL.createObjectURL(n)),r=t.transferControlToOffscreen();o.postMessage({canvas:r,width:s,height:i,blurhash:h},[r])}} })();` },
+    dangerouslySetInnerHTML: { __html: `(() => { "use strict";
+class ImageWithPreview extends HTMLElement {
+  sd;
+  mo;
+  static observedAttributes = ["preview"];
+  #connected = false;
+  get #imgEl() {
+    return this.querySelector("img");
+  }
+  get #canvasEl() {
+    return this.querySelector("canvas");
+  }
+  constructor() {
+    super();
+    this.sd = this.attachShadow({
+      mode: "open"
+    });
+    this.sd.innerHTML = \`<slot name="preview"></slot>\`;
+  }
+  #checkReady = () => {
+    if (this.#imgEl && this.#canvasEl) {
+      this.mo?.disconnect();
+      if (this.#imgEl.complete) {
+        this.#imgLoad();
+      } else {
+        this.#updatePreview();
+        this.#imgEl.addEventListener("load", this.#imgLoad);
+      }
+      return 1;
+    }
+  };
+  connectedCallback() {
+    this.#connected = true;
+    if (!this.#checkReady()) {
+      this.mo = new MutationObserver(this.#checkReady);
+      this.mo.observe(this, {
+        subtree: true,
+        childList: true,
+        attributes: false
+      });
+    }
+  }
+  #imgLoad = () => {
+    this.sd.innerHTML = \`<slot name="image"></slot>\`;
+  };
+  attributeChangedCallback(name) {
+    if (this.#canvasEl && name === "preview") {
+      this.#updatePreview();
+    }
+  }
+  #updatePreview() {
+    if (!this.#connected || !this.getAttribute("preview")) {
+      return;
+    }
+    const previewObj = JSON.parse(this.getAttribute("preview"));
+    updateBlurHashPreview(this.#canvasEl, previewObj);
+  }
+}
+if (!customElements.get("blurhash-image")) {
+  customElements.define("blurhash-image", ImageWithPreview);
+}
+function updateBlurHashPreview(canvasEl, preview) {
+  const {
+    w: width,
+    h: height,
+    blurhash
+  } = preview;
+  canvasEl.width = width;
+  canvasEl.height = height;
+  {
+    const workerBlob = new Blob([document.querySelector("#next-blurhash-worker-script").textContent], {
+      type: "text/javascript"
+    });
+    const worker = new Worker(window.URL.createObjectURL(workerBlob));
+    const offscreen = canvasEl.transferControlToOffscreen();
+    worker.postMessage({
+      canvas: offscreen,
+      width,
+      height,
+      blurhash
+    }, [offscreen]);
+  }
+} })();` },
   }),
   createElement("script", {
     id: "next-blurhash-worker-script",
     type: "javascript/worker",
-    dangerouslySetInnerHTML: { __html: `(() => { "use strict";const v=["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 n=0;for(let e=0;e<t.length;e++){const o=t[e],c=v.indexOf(o);n=n*83+c}return n},x=t=>{let n=t/255;return n<=.04045?n/12.92:Math.pow((n+.055)/1.055,2.4)},p=t=>{let n=Math.max(0,Math.min(1,t));return n<=.0031308?Math.round(n*12.92*255+.5):Math.round((1.055*Math.pow(n,.4166666666666667)-.055)*255+.5)},y=t=>t<0?-1:1,D=(t,n)=>y(t)*Math.pow(Math.abs(t),n);class R extends Error{constructor(n){super(n),this.name="ValidationError",this.message=n}}const I=t=>{if(!t||t.length<6)throw new R("The blurhash string must be at least 6 characters");const n=u(t[0]),e=Math.floor(n/9)+1,o=n%9+1;if(t.length!==4+2*o*e)throw new R(\`blurhash length mismatch: length is \${t.length} but it should be \${4+2*o*e}\`)},T=t=>{const n=t>>16,e=t>>8&255,o=t&255;return[x(n),x(e),x(o)]},A=(t,n)=>{const e=Math.floor(t/361),o=Math.floor(t/19)%19,c=t%19;return[D((e-9)/9,2)*n,D((o-9)/9,2)*n,D((c-9)/9,2)*n]},V=(t,n,e,o)=>{I(t),o=o|1;const c=u(t[0]),d=Math.floor(c/9)+1,r=c%9+1,h=(u(t[1])+1)/166,i=new Array(r*d);for(let s=0;s<i.length;s++)if(s===0){const a=u(t.substring(2,6));i[s]=T(a)}else{const a=u(t.substring(4+s*2,6+s*2));i[s]=A(a,h*o)}const l=n*4,g=new Uint8ClampedArray(l*e);for(let s=0;s<e;s++)for(let a=0;a<n;a++){let B=0,E=0,P=0;for(let m=0;m<d;m++)for(let M=0;M<r;M++){const f=Math.cos(Math.PI*a*M/n)*Math.cos(Math.PI*s*m/e);let w=i[M+m*r];B+=w[0]*f,E+=w[1]*f,P+=w[2]*f}let q=p(B),C=p(E),G=p(P);g[4*a+0+s*l]=q,g[4*a+1+s*l]=C,g[4*a+2+s*l]=G,g[4*a+3+s*l]=255}return g};var $=V;addEventListener("message",t=>{console.log(t);const{canvas:n,width:e,height:o,blurhash:c}=t.data,d=new Promise(r=>setTimeout(r,5e3));Promise.resolve(d).then(()=>{console.log("Encoding",c);const r=+new Date,b=$(c,e,o),h=n.getContext("2d"),i=h.createImageData(e,o);i.data.set(b),h.putImageData(i,0,0);const l=+new Date;console.log("Done Encoding",c,l-r)})}); })();` },
+    dangerouslySetInnerHTML: { __html: `(() => { "use strict";
+const digitCharacters = [
+  "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",
+  "#",
+  "$",
+  "%",
+  "*",
+  "+",
+  ",",
+  "-",
+  ".",
+  ":",
+  ";",
+  "=",
+  "?",
+  "@",
+  "[",
+  "]",
+  "^",
+  "_",
+  "{",
+  "|",
+  "}",
+  "~"
+];
+const decode83 = (str) => {
+  let value = 0;
+  for (let i = 0; i < str.length; i++) {
+    const c = str[i];
+    const digit = digitCharacters.indexOf(c);
+    value = value * 83 + digit;
+  }
+  return value;
+};
+const sRGBToLinear = (value) => {
+  let v = value / 255;
+  if (v <= 0.04045) {
+    return v / 12.92;
+  } else {
+    return Math.pow((v + 0.055) / 1.055, 2.4);
+  }
+};
+const linearTosRGB = (value) => {
+  let v = Math.max(0, Math.min(1, value));
+  if (v <= 31308e-7) {
+    return Math.round(v * 12.92 * 255 + 0.5);
+  } else {
+    return Math.round((1.055 * Math.pow(v, 1 / 2.4) - 0.055) * 255 + 0.5);
+  }
+};
+const sign = (n) => n < 0 ? -1 : 1;
+const signPow = (val, exp) => sign(val) * Math.pow(Math.abs(val), exp);
+class ValidationError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "ValidationError";
+    this.message = message;
+  }
+}
+const validateBlurhash = (blurhash) => {
+  if (!blurhash || blurhash.length < 6) {
+    throw new ValidationError("The blurhash string must be at least 6 characters");
+  }
+  const sizeFlag = decode83(blurhash[0]);
+  const numY = Math.floor(sizeFlag / 9) + 1;
+  const numX = sizeFlag % 9 + 1;
+  if (blurhash.length !== 4 + 2 * numX * numY) {
+    throw new ValidationError(\`blurhash length mismatch: length is \${blurhash.length} but it should be \${4 + 2 * numX * numY}\`);
+  }
+};
+const decodeDC = (value) => {
+  const intR = value >> 16;
+  const intG = value >> 8 & 255;
+  const intB = value & 255;
+  return [sRGBToLinear(intR), sRGBToLinear(intG), sRGBToLinear(intB)];
+};
+const decodeAC = (value, maximumValue) => {
+  const quantR = Math.floor(value / (19 * 19));
+  const quantG = Math.floor(value / 19) % 19;
+  const quantB = value % 19;
+  const rgb = [
+    signPow((quantR - 9) / 9, 2) * maximumValue,
+    signPow((quantG - 9) / 9, 2) * maximumValue,
+    signPow((quantB - 9) / 9, 2) * maximumValue
+  ];
+  return rgb;
+};
+const decode = (blurhash, width, height, punch) => {
+  validateBlurhash(blurhash);
+  punch = punch | 1;
+  const sizeFlag = decode83(blurhash[0]);
+  const numY = Math.floor(sizeFlag / 9) + 1;
+  const numX = sizeFlag % 9 + 1;
+  const quantisedMaximumValue = decode83(blurhash[1]);
+  const maximumValue = (quantisedMaximumValue + 1) / 166;
+  const colors = new Array(numX * numY);
+  for (let i = 0; i < colors.length; i++) {
+    if (i === 0) {
+      const value = decode83(blurhash.substring(2, 6));
+      colors[i] = decodeDC(value);
+    } else {
+      const value = decode83(blurhash.substring(4 + i * 2, 6 + i * 2));
+      colors[i] = decodeAC(value, maximumValue * punch);
+    }
+  }
+  const bytesPerRow = width * 4;
+  const pixels = new Uint8ClampedArray(bytesPerRow * height);
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      let r = 0;
+      let g = 0;
+      let b = 0;
+      for (let j = 0; j < numY; j++) {
+        for (let i = 0; i < numX; i++) {
+          const basis = Math.cos(Math.PI * x * i / width) * Math.cos(Math.PI * y * j / height);
+          let color = colors[i + j * numX];
+          r += color[0] * basis;
+          g += color[1] * basis;
+          b += color[2] * basis;
+        }
+      }
+      let intR = linearTosRGB(r);
+      let intG = linearTosRGB(g);
+      let intB = linearTosRGB(b);
+      pixels[4 * x + 0 + y * bytesPerRow] = intR;
+      pixels[4 * x + 1 + y * bytesPerRow] = intG;
+      pixels[4 * x + 2 + y * bytesPerRow] = intB;
+      pixels[4 * x + 3 + y * bytesPerRow] = 255;
+    }
+  }
+  return pixels;
+};
+var decode$1 = decode;
+addEventListener("message", (evt) => {
+  console.log(evt);
+  const { canvas, width, height, blurhash } = evt.data;
+  console.log("Encoding", blurhash);
+  const start = +new Date();
+  const pixels = decode$1(blurhash, width, height);
+  const ctx = canvas.getContext("2d");
+  const imageData = ctx.createImageData(width, height);
+  imageData.data.set(pixels);
+  ctx.putImageData(imageData, 0, 0);
+  const end = +new Date();
+  console.log("Done Encoding", blurhash, end - start);
+}); })();` },
   })
 );

package/package.json

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

package/vite.wc.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
       fileName: () => "imageWithPreview.js",
       name: "imageWithPreview",
     },
-    //minify: false,
+    minify: false,
   },
   plugins: [react()],
 });

package/vite.worker.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
       fileName: () => "workerScript.js",
       name: "workerScript",
     },
-    //minify: false,
+    minify: false,
   },
   plugins: [react()],
 });