next-blurhash-previews 0.0.3-beta61 → 0.0.3-beta64

package/components/ImageWithPreview.tsx

@@ -1,3 +1,5 @@
+import { decode } from "blurhash/dist/esm";
+
 type blurhash = { w: number; h: number; blurhash: string };
 
 class ImageWithPreview extends HTMLElement {
@@ -72,21 +74,35 @@ if (!customElements.get("blurhash-image")) {
   customElements.define("blurhash-image", ImageWithPreview);
 }
 
-const workerBlob = new Blob(
-  [document.querySelector("#next-blurhash-worker-script")!.textContent!],
-  { type: "text/javascript" }
-);
-const worker = new Worker(window.URL.createObjectURL(workerBlob));
+var worker;
 
 function updateBlurHashPreview(canvasEl: HTMLCanvasElement, preview: blurhash) {
   const { w: width, h: height, blurhash } = preview;
   canvasEl.width = width;
   canvasEl.height = height;
 
-  if (true) {
-    const offscreen = (canvasEl as any).transferControlToOffscreen();
-    worker.postMessage({ canvas: offscreen, width, height, blurhash }, [
-      offscreen,
-    ]);
-  }
+  const start = +new Date();
+
+  const pixels = decode(blurhash, width, height);
+  const ctx = canvasEl.getContext("2d")!;
+  const imageData = ctx.createImageData(width, height);
+  imageData.data.set(pixels);
+  ctx.putImageData(imageData, 0, 0);
+
+  const end = +new Date();
+
+  console.log("Blurhash", end - start);
+  // if (true) {
+  //   if (!worker) {
+  //     const workerBlob = new Blob(
+  //       [document.querySelector("#next-blurhash-worker-script")!.textContent!],
+  //       { type: "text/javascript" }
+  //     );
+  //     worker = new Worker(window.URL.createObjectURL(workerBlob));
+  //   }
+  //   const offscreen = (canvasEl as any).transferControlToOffscreen();
+  //   worker.postMessage({ canvas: offscreen, width, height, blurhash }, [
+  //     offscreen,
+  //   ]);
+  // }
 }

package/imagePreviewBootstrap.js

@@ -5,6 +5,199 @@ export const imagePreviewBootstrap = createElement(
   {},
   createElement("script", {
     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;
 class ImageWithPreview extends HTMLElement {
   sd;
   mo;
@@ -65,10 +258,6 @@ class ImageWithPreview extends HTMLElement {
 if (!customElements.get("blurhash-image")) {
   customElements.define("blurhash-image", ImageWithPreview);
 }
-const workerBlob = new Blob([document.querySelector("#next-blurhash-worker-script").textContent], {
-  type: "text/javascript"
-});
-const worker = new Worker(window.URL.createObjectURL(workerBlob));
 function updateBlurHashPreview(canvasEl, preview) {
   const {
     w: width,
@@ -77,15 +266,14 @@ function updateBlurHashPreview(canvasEl, preview) {
   } = preview;
   canvasEl.width = width;
   canvasEl.height = height;
-  {
-    const offscreen = canvasEl.transferControlToOffscreen();
-    worker.postMessage({
-      canvas: offscreen,
-      width,
-      height,
-      blurhash
-    }, [offscreen]);
-  }
+  const start = +new Date();
+  const pixels = decode$1(blurhash, width, height);
+  const ctx = canvasEl.getContext("2d");
+  const imageData = ctx.createImageData(width, height);
+  imageData.data.set(pixels);
+  ctx.putImageData(imageData, 0, 0);
+  const end = +new Date();
+  console.log("Blurhash", end - start);
 } })();` },
   }),
   createElement("script", {

package/package.json

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