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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,3 @@
1
- import { decode } from "blurhash/dist/esm";
2
-
3
1
  type blurhash = { w: number; h: number; blurhash: string };
4
2
 
5
3
  class ImageWithPreview extends HTMLElement {
@@ -81,28 +79,17 @@ function updateBlurHashPreview(canvasEl: HTMLCanvasElement, preview: blurhash) {
81
79
  canvasEl.width = width;
82
80
  canvasEl.height = height;
83
81
 
84
- const start = +new Date();
85
-
86
- const pixels = decode(blurhash, width, height);
87
- const ctx = canvasEl.getContext("2d")!;
88
- const imageData = ctx.createImageData(width, height);
89
- imageData.data.set(pixels);
90
- ctx.putImageData(imageData, 0, 0);
91
-
92
- const end = +new Date();
93
-
94
- console.log("Blurhash", end - start);
95
- // if (true) {
96
- // if (!worker) {
97
- // const workerBlob = new Blob(
98
- // [document.querySelector("#next-blurhash-worker-script")!.textContent!],
99
- // { type: "text/javascript" }
100
- // );
101
- // worker = new Worker(window.URL.createObjectURL(workerBlob));
102
- // }
103
- // const offscreen = (canvasEl as any).transferControlToOffscreen();
104
- // worker.postMessage({ canvas: offscreen, width, height, blurhash }, [
105
- // offscreen,
106
- // ]);
107
- // }
82
+ if (true) {
83
+ if (!worker) {
84
+ const workerBlob = new Blob(
85
+ [document.querySelector("#next-blurhash-worker-script")!.textContent!],
86
+ { type: "text/javascript" }
87
+ );
88
+ worker = new Worker(window.URL.createObjectURL(workerBlob));
89
+ }
90
+ const offscreen = (canvasEl as any).transferControlToOffscreen();
91
+ worker.postMessage({ canvas: offscreen, width, height, blurhash }, [
92
+ offscreen,
93
+ ]);
94
+ }
108
95
  }
@@ -5,199 +5,6 @@ export const imagePreviewBootstrap = createElement(
5
5
  {},
6
6
  createElement("script", {
7
7
  dangerouslySetInnerHTML: { __html: `(() => { "use strict";
8
- const digitCharacters = [
9
- "0",
10
- "1",
11
- "2",
12
- "3",
13
- "4",
14
- "5",
15
- "6",
16
- "7",
17
- "8",
18
- "9",
19
- "A",
20
- "B",
21
- "C",
22
- "D",
23
- "E",
24
- "F",
25
- "G",
26
- "H",
27
- "I",
28
- "J",
29
- "K",
30
- "L",
31
- "M",
32
- "N",
33
- "O",
34
- "P",
35
- "Q",
36
- "R",
37
- "S",
38
- "T",
39
- "U",
40
- "V",
41
- "W",
42
- "X",
43
- "Y",
44
- "Z",
45
- "a",
46
- "b",
47
- "c",
48
- "d",
49
- "e",
50
- "f",
51
- "g",
52
- "h",
53
- "i",
54
- "j",
55
- "k",
56
- "l",
57
- "m",
58
- "n",
59
- "o",
60
- "p",
61
- "q",
62
- "r",
63
- "s",
64
- "t",
65
- "u",
66
- "v",
67
- "w",
68
- "x",
69
- "y",
70
- "z",
71
- "#",
72
- "$",
73
- "%",
74
- "*",
75
- "+",
76
- ",",
77
- "-",
78
- ".",
79
- ":",
80
- ";",
81
- "=",
82
- "?",
83
- "@",
84
- "[",
85
- "]",
86
- "^",
87
- "_",
88
- "{",
89
- "|",
90
- "}",
91
- "~"
92
- ];
93
- const decode83 = (str) => {
94
- let value = 0;
95
- for (let i = 0; i < str.length; i++) {
96
- const c = str[i];
97
- const digit = digitCharacters.indexOf(c);
98
- value = value * 83 + digit;
99
- }
100
- return value;
101
- };
102
- const sRGBToLinear = (value) => {
103
- let v = value / 255;
104
- if (v <= 0.04045) {
105
- return v / 12.92;
106
- } else {
107
- return Math.pow((v + 0.055) / 1.055, 2.4);
108
- }
109
- };
110
- const linearTosRGB = (value) => {
111
- let v = Math.max(0, Math.min(1, value));
112
- if (v <= 31308e-7) {
113
- return Math.round(v * 12.92 * 255 + 0.5);
114
- } else {
115
- return Math.round((1.055 * Math.pow(v, 1 / 2.4) - 0.055) * 255 + 0.5);
116
- }
117
- };
118
- const sign = (n) => n < 0 ? -1 : 1;
119
- const signPow = (val, exp) => sign(val) * Math.pow(Math.abs(val), exp);
120
- class ValidationError extends Error {
121
- constructor(message) {
122
- super(message);
123
- this.name = "ValidationError";
124
- this.message = message;
125
- }
126
- }
127
- const validateBlurhash = (blurhash) => {
128
- if (!blurhash || blurhash.length < 6) {
129
- throw new ValidationError("The blurhash string must be at least 6 characters");
130
- }
131
- const sizeFlag = decode83(blurhash[0]);
132
- const numY = Math.floor(sizeFlag / 9) + 1;
133
- const numX = sizeFlag % 9 + 1;
134
- if (blurhash.length !== 4 + 2 * numX * numY) {
135
- throw new ValidationError(\`blurhash length mismatch: length is \${blurhash.length} but it should be \${4 + 2 * numX * numY}\`);
136
- }
137
- };
138
- const decodeDC = (value) => {
139
- const intR = value >> 16;
140
- const intG = value >> 8 & 255;
141
- const intB = value & 255;
142
- return [sRGBToLinear(intR), sRGBToLinear(intG), sRGBToLinear(intB)];
143
- };
144
- const decodeAC = (value, maximumValue) => {
145
- const quantR = Math.floor(value / (19 * 19));
146
- const quantG = Math.floor(value / 19) % 19;
147
- const quantB = value % 19;
148
- const rgb = [
149
- signPow((quantR - 9) / 9, 2) * maximumValue,
150
- signPow((quantG - 9) / 9, 2) * maximumValue,
151
- signPow((quantB - 9) / 9, 2) * maximumValue
152
- ];
153
- return rgb;
154
- };
155
- const decode = (blurhash, width, height, punch) => {
156
- validateBlurhash(blurhash);
157
- punch = punch | 1;
158
- const sizeFlag = decode83(blurhash[0]);
159
- const numY = Math.floor(sizeFlag / 9) + 1;
160
- const numX = sizeFlag % 9 + 1;
161
- const quantisedMaximumValue = decode83(blurhash[1]);
162
- const maximumValue = (quantisedMaximumValue + 1) / 166;
163
- const colors = new Array(numX * numY);
164
- for (let i = 0; i < colors.length; i++) {
165
- if (i === 0) {
166
- const value = decode83(blurhash.substring(2, 6));
167
- colors[i] = decodeDC(value);
168
- } else {
169
- const value = decode83(blurhash.substring(4 + i * 2, 6 + i * 2));
170
- colors[i] = decodeAC(value, maximumValue * punch);
171
- }
172
- }
173
- const bytesPerRow = width * 4;
174
- const pixels = new Uint8ClampedArray(bytesPerRow * height);
175
- for (let y = 0; y < height; y++) {
176
- for (let x = 0; x < width; x++) {
177
- let r = 0;
178
- let g = 0;
179
- let b = 0;
180
- for (let j = 0; j < numY; j++) {
181
- for (let i = 0; i < numX; i++) {
182
- const basis = Math.cos(Math.PI * x * i / width) * Math.cos(Math.PI * y * j / height);
183
- let color = colors[i + j * numX];
184
- r += color[0] * basis;
185
- g += color[1] * basis;
186
- b += color[2] * basis;
187
- }
188
- }
189
- let intR = linearTosRGB(r);
190
- let intG = linearTosRGB(g);
191
- let intB = linearTosRGB(b);
192
- pixels[4 * x + 0 + y * bytesPerRow] = intR;
193
- pixels[4 * x + 1 + y * bytesPerRow] = intG;
194
- pixels[4 * x + 2 + y * bytesPerRow] = intB;
195
- pixels[4 * x + 3 + y * bytesPerRow] = 255;
196
- }
197
- }
198
- return pixels;
199
- };
200
- var decode$1 = decode;
201
8
  class ImageWithPreview extends HTMLElement {
202
9
  sd;
203
10
  mo;
@@ -258,6 +65,7 @@ class ImageWithPreview extends HTMLElement {
258
65
  if (!customElements.get("blurhash-image")) {
259
66
  customElements.define("blurhash-image", ImageWithPreview);
260
67
  }
68
+ var worker;
261
69
  function updateBlurHashPreview(canvasEl, preview) {
262
70
  const {
263
71
  w: width,
@@ -266,14 +74,21 @@ function updateBlurHashPreview(canvasEl, preview) {
266
74
  } = preview;
267
75
  canvasEl.width = width;
268
76
  canvasEl.height = height;
269
- const start = +new Date();
270
- const pixels = decode$1(blurhash, width, height);
271
- const ctx = canvasEl.getContext("2d");
272
- const imageData = ctx.createImageData(width, height);
273
- imageData.data.set(pixels);
274
- ctx.putImageData(imageData, 0, 0);
275
- const end = +new Date();
276
- console.log("Blurhash", end - start);
77
+ {
78
+ if (!worker) {
79
+ const workerBlob = new Blob([document.querySelector("#next-blurhash-worker-script").textContent], {
80
+ type: "text/javascript"
81
+ });
82
+ worker = new Worker(window.URL.createObjectURL(workerBlob));
83
+ }
84
+ const offscreen = canvasEl.transferControlToOffscreen();
85
+ worker.postMessage({
86
+ canvas: offscreen,
87
+ width,
88
+ height,
89
+ blurhash
90
+ }, [offscreen]);
91
+ }
277
92
  } })();` },
278
93
  }),
279
94
  createElement("script", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-blurhash-previews",
3
- "version": "0.0.3-beta64",
3
+ "version": "0.0.3-beta67",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "module": "index.js",