next-blurhash-previews 0.0.3-beta52 → 0.0.3-beta55
Sign up to get free protection for your applications and to get access to all the features.
@@ -1,10 +1,5 @@
|
|
1
|
-
import { decode } from "blurhash/dist/esm";
|
2
|
-
|
3
1
|
type blurhash = { w: number; h: number; blurhash: string };
|
4
2
|
|
5
|
-
declare function __blurhashDecode(blurhash: string, width: number, height: any);
|
6
|
-
(window as any).__blurhashDecode = decode;
|
7
|
-
|
8
3
|
class ImageWithPreview extends HTMLElement {
|
9
4
|
sd: ShadowRoot;
|
10
5
|
mo?: MutationObserver;
|
@@ -37,7 +32,7 @@ class ImageWithPreview extends HTMLElement {
|
|
37
32
|
this.#imgEl.addEventListener("load", this.#imgLoad);
|
38
33
|
}
|
39
34
|
|
40
|
-
return
|
35
|
+
return 1;
|
41
36
|
}
|
42
37
|
};
|
43
38
|
|
@@ -54,9 +49,7 @@ class ImageWithPreview extends HTMLElement {
|
|
54
49
|
}
|
55
50
|
|
56
51
|
#imgLoad = () => {
|
57
|
-
|
58
|
-
this.sd.innerHTML = `<slot name="image"></slot>`;
|
59
|
-
}, 19000);
|
52
|
+
this.sd.innerHTML = `<slot name="image"></slot>`;
|
60
53
|
};
|
61
54
|
|
62
55
|
attributeChangedCallback(name) {
|
@@ -96,11 +89,4 @@ function updateBlurHashPreview(canvasEl: HTMLCanvasElement, preview: blurhash) {
|
|
96
89
|
offscreen,
|
97
90
|
]);
|
98
91
|
}
|
99
|
-
|
100
|
-
return;
|
101
|
-
const pixels = decode(blurhash, width, height);
|
102
|
-
const ctx = canvasEl.getContext("2d")!;
|
103
|
-
const imageData = ctx.createImageData(width, height);
|
104
|
-
imageData.data.set(pixels);
|
105
|
-
ctx.putImageData(imageData, 0, 0);
|
106
92
|
}
|
@@ -1,20 +1,17 @@
|
|
1
|
-
|
1
|
+
import { decode } from "blurhash/dist/esm";
|
2
2
|
|
3
3
|
addEventListener("message", evt => {
|
4
4
|
console.log(evt);
|
5
5
|
|
6
6
|
const { canvas, width, height, blurhash } = evt.data;
|
7
7
|
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
const end = +new Date();
|
18
|
-
console.log("Done Encoding", blurhash, end - start);
|
19
|
-
});
|
8
|
+
console.log("Encoding", blurhash);
|
9
|
+
const start = +new Date();
|
10
|
+
const pixels = decode(blurhash, width, height);
|
11
|
+
const ctx = canvas.getContext("2d");
|
12
|
+
const imageData = ctx.createImageData(width, height);
|
13
|
+
imageData.data.set(pixels);
|
14
|
+
ctx.putImageData(imageData, 0, 0);
|
15
|
+
const end = +new Date();
|
16
|
+
console.log("Done Encoding", blurhash, end - start);
|
20
17
|
});
|
package/imagePreviewBootstrap.js
CHANGED
@@ -4,11 +4,11 @@ export const imagePreviewBootstrap = createElement(
|
|
4
4
|
Fragment,
|
5
5
|
{},
|
6
6
|
createElement("script", {
|
7
|
-
dangerouslySetInnerHTML: { __html: `(() => { "use strict";
|
7
|
+
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])}} })();` },
|
8
8
|
}),
|
9
9
|
createElement("script", {
|
10
10
|
id: "next-blurhash-worker-script",
|
11
11
|
type: "javascript/worker",
|
12
|
-
dangerouslySetInnerHTML: { __html: `(() => { "use strict";
|
12
|
+
dangerouslySetInnerHTML: { __html: `(() => { "use strict";const I=["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 o=0;o<t.length;o++){const e=t[o],c=I.indexOf(e);n=n*83+c}return n},D=t=>{let n=t/255;return n<=.04045?n/12.92:Math.pow((n+.055)/1.055,2.4)},b=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)},P=t=>t<0?-1:1,p=(t,n)=>P(t)*Math.pow(Math.abs(t),n);class q extends Error{constructor(n){super(n),this.name="ValidationError",this.message=n}}const v=t=>{if(!t||t.length<6)throw new q("The blurhash string must be at least 6 characters");const n=u(t[0]),o=Math.floor(n/9)+1,e=n%9+1;if(t.length!==4+2*e*o)throw new q(\`blurhash length mismatch: length is \${t.length} but it should be \${4+2*e*o}\`)},A=t=>{const n=t>>16,o=t>>8&255,e=t&255;return[D(n),D(o),D(e)]},T=(t,n)=>{const o=Math.floor(t/361),e=Math.floor(t/19)%19,c=t%19;return[p((o-9)/9,2)*n,p((e-9)/9,2)*n,p((c-9)/9,2)*n]},V=(t,n,o,e)=>{v(t),e=e|1;const c=u(t[0]),i=Math.floor(c/9)+1,l=c%9+1,h=(u(t[1])+1)/166,r=new Array(l*i);for(let s=0;s<r.length;s++)if(s===0){const a=u(t.substring(2,6));r[s]=A(a)}else{const a=u(t.substring(4+s*2,6+s*2));r[s]=T(a,h*e)}const d=n*4,g=new Uint8ClampedArray(d*o);for(let s=0;s<o;s++)for(let a=0;a<n;a++){let B=0,E=0,R=0;for(let M=0;M<i;M++)for(let f=0;f<l;f++){const w=Math.cos(Math.PI*a*f/n)*Math.cos(Math.PI*s*M/o);let x=r[f+M*l];B+=x[0]*w,E+=x[1]*w,R+=x[2]*w}let C=b(B),G=b(E),y=b(R);g[4*a+0+s*d]=C,g[4*a+1+s*d]=G,g[4*a+2+s*d]=y,g[4*a+3+s*d]=255}return g};var $=V;addEventListener("message",t=>{console.log(t);const{canvas:n,width:o,height:e,blurhash:c}=t.data;console.log("Encoding",c);const i=+new Date,l=$(c,o,e),m=n.getContext("2d"),h=m.createImageData(o,e);h.data.set(l),m.putImageData(h,0,0);const r=+new Date;console.log("Done Encoding",c,r-i)}); })();` },
|
13
13
|
})
|
14
14
|
);
|