next-blurhash-previews 0.0.3-beta71 → 0.0.3-beta72
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.
- package/components/ImageWithPreview.tsx +16 -21
- package/imagePreviewBootstrap.js +8 -11
- package/package.json +1 -1
|
@@ -76,6 +76,22 @@ const workerBlob = new Blob(
|
|
|
76
76
|
[document.querySelector("#next-blurhash-worker-script")!.textContent!],
|
|
77
77
|
{ type: "text/javascript" }
|
|
78
78
|
);
|
|
79
|
+
const worker = new Worker(window.URL.createObjectURL(workerBlob));
|
|
80
|
+
|
|
81
|
+
const emptyCanvas = document
|
|
82
|
+
.createElement("canvas")
|
|
83
|
+
// @ts-ignore
|
|
84
|
+
.transferControlToOffscreen();
|
|
85
|
+
|
|
86
|
+
worker.postMessage(
|
|
87
|
+
{
|
|
88
|
+
canvas: emptyCanvas,
|
|
89
|
+
width: 50,
|
|
90
|
+
height: 50,
|
|
91
|
+
blurhash: "L05E$[offQofoffQfQfQfQfQfQfQ",
|
|
92
|
+
},
|
|
93
|
+
[emptyCanvas]
|
|
94
|
+
);
|
|
79
95
|
|
|
80
96
|
function updateBlurHashPreview(canvasEl: HTMLCanvasElement, preview: blurhash) {
|
|
81
97
|
const { w: width, h: height, blurhash } = preview;
|
|
@@ -83,27 +99,6 @@ function updateBlurHashPreview(canvasEl: HTMLCanvasElement, preview: blurhash) {
|
|
|
83
99
|
canvasEl.height = height;
|
|
84
100
|
|
|
85
101
|
if (true) {
|
|
86
|
-
const worker = new Worker(window.URL.createObjectURL(workerBlob));
|
|
87
|
-
|
|
88
|
-
const s = +new Date();
|
|
89
|
-
|
|
90
|
-
const emptyCanv = document
|
|
91
|
-
.createElement("canvas")
|
|
92
|
-
// @ts-ignore
|
|
93
|
-
.transferControlToOffscreen();
|
|
94
|
-
|
|
95
|
-
worker.postMessage(
|
|
96
|
-
{
|
|
97
|
-
canvas: emptyCanv,
|
|
98
|
-
width: 50,
|
|
99
|
-
height: 50,
|
|
100
|
-
blurhash: "L05E$[offQofoffQfQfQfQfQfQfQ",
|
|
101
|
-
},
|
|
102
|
-
[emptyCanv]
|
|
103
|
-
);
|
|
104
|
-
const e = +new Date();
|
|
105
|
-
console.log("bootstrap", e - s);
|
|
106
|
-
|
|
107
102
|
const offscreen = (canvasEl as any).transferControlToOffscreen();
|
|
108
103
|
worker.postMessage({ canvas: offscreen, width, height, blurhash }, [
|
|
109
104
|
offscreen,
|
package/imagePreviewBootstrap.js
CHANGED
|
@@ -279,6 +279,14 @@ if (!customElements.get("blurhash-image")) {
|
|
|
279
279
|
const workerBlob = new Blob([document.querySelector("#next-blurhash-worker-script").textContent], {
|
|
280
280
|
type: "text/javascript"
|
|
281
281
|
});
|
|
282
|
+
const worker = new Worker(window.URL.createObjectURL(workerBlob));
|
|
283
|
+
const emptyCanvas = document.createElement("canvas").transferControlToOffscreen();
|
|
284
|
+
worker.postMessage({
|
|
285
|
+
canvas: emptyCanvas,
|
|
286
|
+
width: 50,
|
|
287
|
+
height: 50,
|
|
288
|
+
blurhash: "L05E$[offQofoffQfQfQfQfQfQfQ"
|
|
289
|
+
}, [emptyCanvas]);
|
|
282
290
|
function updateBlurHashPreview(canvasEl, preview) {
|
|
283
291
|
const {
|
|
284
292
|
w: width,
|
|
@@ -288,17 +296,6 @@ function updateBlurHashPreview(canvasEl, preview) {
|
|
|
288
296
|
canvasEl.width = width;
|
|
289
297
|
canvasEl.height = height;
|
|
290
298
|
{
|
|
291
|
-
const worker = new Worker(window.URL.createObjectURL(workerBlob));
|
|
292
|
-
const s = +new Date();
|
|
293
|
-
const emptyCanv = document.createElement("canvas").transferControlToOffscreen();
|
|
294
|
-
worker.postMessage({
|
|
295
|
-
canvas: emptyCanv,
|
|
296
|
-
width: 50,
|
|
297
|
-
height: 50,
|
|
298
|
-
blurhash: "L05E$[offQofoffQfQfQfQfQfQfQ"
|
|
299
|
-
}, [emptyCanv]);
|
|
300
|
-
const e = +new Date();
|
|
301
|
-
console.log("bootstrap", e - s);
|
|
302
299
|
const offscreen = canvasEl.transferControlToOffscreen();
|
|
303
300
|
worker.postMessage({
|
|
304
301
|
canvas: offscreen,
|