next-blurhash-previews 0.0.3-beta64 → 0.0.3-beta67

package/components/ImageWithPreview.tsx

@@ -1,5 +1,3 @@
-import { decode } from "blurhash/dist/esm";
-
 type blurhash = { w: number; h: number; blurhash: string };
 
 class ImageWithPreview extends HTMLElement {
@@ -81,28 +79,17 @@ function updateBlurHashPreview(canvasEl: HTMLCanvasElement, preview: blurhash) {
   canvasEl.width = width;
   canvasEl.height = height;
 
-  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,
-  //   ]);
-  // }
+  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,199 +5,6 @@ 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;
@@ -258,6 +65,7 @@ class ImageWithPreview extends HTMLElement {
 if (!customElements.get("blurhash-image")) {
   customElements.define("blurhash-image", ImageWithPreview);
 }
+var worker;
 function updateBlurHashPreview(canvasEl, preview) {
   const {
     w: width,
@@ -266,14 +74,21 @@ function updateBlurHashPreview(canvasEl, preview) {
   } = preview;
   canvasEl.width = width;
   canvasEl.height = height;
-  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);
+  {
+    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.transferControlToOffscreen();
+    worker.postMessage({
+      canvas: offscreen,
+      width,
+      height,
+      blurhash
+    }, [offscreen]);
+  }
 } })();` },
   }),
   createElement("script", {

package/package.json

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