next-blurhash-previews 0.0.3-beta76 → 0.0.3-beta79
Sign up to get free protection for your applications and to get access to all the features.
package/bin/remark-plugin.js
CHANGED
|
@@ -39,7 +39,7 @@ export const blurhashPlugin = publicPath => () => {
|
|
|
39
39
|
|
|
40
40
|
const newNode = `
|
|
41
41
|
<blurhash-image url="${originalImg}" preview='${JSON.stringify(blurHash)}'>
|
|
42
|
-
<img alt="${alt}" width="${
|
|
42
|
+
<img alt="${alt}" width="${dw}" height="${dh}" src="${originalImg}" slot="image" />
|
|
43
43
|
<canvas width="${w}" height="${h}" style="width: ${dw}px; height: auto;" slot="preview"></canvas>
|
|
44
44
|
</blurhash-image>`.trim();
|
|
45
45
|
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
type blurhash = { w: number; h: number; blurhash: string };
|
|
2
2
|
|
|
3
|
+
interface HTMLCanvasElement {
|
|
4
|
+
transferControlToOffscreen(): this & Transferable;
|
|
5
|
+
}
|
|
6
|
+
|
|
3
7
|
class ImageWithPreview extends HTMLElement {
|
|
4
8
|
sd: ShadowRoot;
|
|
5
9
|
mo?: MutationObserver;
|
|
@@ -78,28 +82,13 @@ const workerBlob = new Blob(
|
|
|
78
82
|
);
|
|
79
83
|
const worker = new Worker(window.URL.createObjectURL(workerBlob));
|
|
80
84
|
|
|
81
|
-
const emptyCanvas = document
|
|
82
|
-
.createElement("canvas")
|
|
83
|
-
// @ts-ignore
|
|
84
|
-
.transferControlToOffscreen();
|
|
85
|
-
|
|
86
|
-
worker.postMessage(
|
|
87
|
-
{
|
|
88
|
-
canvas: emptyCanvas,
|
|
89
|
-
width: 25,
|
|
90
|
-
height: 25,
|
|
91
|
-
blurhash: "L05E$[offQofoffQfQfQfQfQfQfQ",
|
|
92
|
-
},
|
|
93
|
-
[emptyCanvas]
|
|
94
|
-
);
|
|
95
|
-
|
|
96
85
|
function updateBlurHashPreview(canvasEl: HTMLCanvasElement, preview: blurhash) {
|
|
97
86
|
const { w: width, h: height, blurhash } = preview;
|
|
98
87
|
canvasEl.width = width;
|
|
99
88
|
canvasEl.height = height;
|
|
100
89
|
|
|
101
|
-
if (
|
|
102
|
-
const offscreen =
|
|
90
|
+
if (canvasEl.transferControlToOffscreen) {
|
|
91
|
+
const offscreen = canvasEl.transferControlToOffscreen();
|
|
103
92
|
worker.postMessage({ canvas: offscreen, width, height, blurhash }, [
|
|
104
93
|
offscreen,
|
|
105
94
|
]);
|
package/imagePreviewBootstrap.js
CHANGED
|
@@ -9,6 +9,6 @@ export const imagePreviewBootstrap = createElement(
|
|
|
9
9
|
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)}); })();` },
|
|
10
10
|
}),
|
|
11
11
|
createElement("script", {
|
|
12
|
-
dangerouslySetInnerHTML: { __html: `(() => { "use strict";class
|
|
12
|
+
dangerouslySetInnerHTML: { __html: `(() => { "use strict";class n 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.#o(),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(t){this.#t&&t==="preview"&&this.#o()}#o(){if(!this.#s||!this.getAttribute("preview"))return;const t=JSON.parse(this.getAttribute("preview"));c(this.#t,t)}}customElements.get("blurhash-image")||customElements.define("blurhash-image",n);const h=new Blob([document.querySelector("#next-blurhash-worker-script").textContent],{type:"text/javascript"}),a=new Worker(window.URL.createObjectURL(h));function c(e,t){const{w:s,h:i,blurhash:o}=t;if(e.width=s,e.height=i,e.transferControlToOffscreen){const r=e.transferControlToOffscreen();a.postMessage({canvas:r,width:s,height:i,blurhash:o},[r])}} })();` },
|
|
13
13
|
})
|
|
14
14
|
);
|