@substrate-system/blur-hash 0.0.0 → 0.0.2
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/README.md +46 -18
- package/dist/index.cjs +7 -5
- package/dist/index.cjs.map +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +7 -5
- package/dist/index.js.map +2 -2
- package/dist/index.min.js +4 -4
- package/dist/index.min.js.map +3 -3
- package/dist/meta.json +4 -4
- package/dist/style.css +5 -3
- package/dist/style.min.css +2 -2
- package/package.json +3 -2
- package/README.example.md +0 -84
package/README.md
CHANGED
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
[](README.md)
|
|
4
4
|
[](README.md)
|
|
5
5
|
[](https://semver.org/)
|
|
6
|
-
[](package.json)
|
|
7
6
|
[](LICENSE)
|
|
8
7
|
|
|
9
8
|
This is the ["blur-up" image loading technique](https://css-tricks.com/the-blur-up-technique-for-loading-background-images/), with the [blur-hash algorithm](https://blurha.sh/), as a [web component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components).
|
|
@@ -13,6 +12,24 @@ This is the ["blur-up" image loading technique](https://css-tricks.com/the-blur-
|
|
|
13
12
|
> [!TIP]
|
|
14
13
|
> Throttle the internet speed with the dev tools.
|
|
15
14
|
|
|
15
|
+
<!-- toc -->
|
|
16
|
+
|
|
17
|
+
- [install](#install)
|
|
18
|
+
- [API](#api)
|
|
19
|
+
* [ESM](#esm)
|
|
20
|
+
* [Common JS](#common-js)
|
|
21
|
+
* [attributes](#attributes)
|
|
22
|
+
- [CSS](#css)
|
|
23
|
+
* [Import CSS](#import-css)
|
|
24
|
+
* [variables](#variables)
|
|
25
|
+
- [use](#use)
|
|
26
|
+
* [Bundler](#bundler)
|
|
27
|
+
* [pre-built JS](#pre-built-js)
|
|
28
|
+
- [Create the string](#create-the-string)
|
|
29
|
+
* [Print to system clipboard](#print-to-system-clipboard)
|
|
30
|
+
|
|
31
|
+
<!-- tocstop -->
|
|
32
|
+
|
|
16
33
|
## install
|
|
17
34
|
|
|
18
35
|
```sh
|
|
@@ -33,6 +50,18 @@ import '@substrate-system/blur-hash'
|
|
|
33
50
|
require('@substrate-system/blur-hash')
|
|
34
51
|
```
|
|
35
52
|
|
|
53
|
+
### attributes
|
|
54
|
+
Takes the following attributes
|
|
55
|
+
|
|
56
|
+
#### time
|
|
57
|
+
The time for css transitions and animation. This is set as a CSS variable.
|
|
58
|
+
|
|
59
|
+
#### placeholder
|
|
60
|
+
The string created by the blurhash algorithm. See [node example](#create-the-string).
|
|
61
|
+
|
|
62
|
+
#### width & height
|
|
63
|
+
The dimensions for the image
|
|
64
|
+
|
|
36
65
|
## CSS
|
|
37
66
|
|
|
38
67
|
### Import CSS
|
|
@@ -46,16 +75,27 @@ Or minified:
|
|
|
46
75
|
import '@substrate-system/blur-hash/css/min'
|
|
47
76
|
```
|
|
48
77
|
|
|
78
|
+
### variables
|
|
79
|
+
|
|
80
|
+
__CSS variables__
|
|
81
|
+
|
|
82
|
+
* `--blur-hash-time` -- the transition time for animating blurry -> sharp,
|
|
83
|
+
default is `0.8s`
|
|
84
|
+
* `--blur-hash-opactiy` -- the opacity to use for the placeholder image,
|
|
85
|
+
default is `0.6`
|
|
86
|
+
|
|
49
87
|
## use
|
|
50
88
|
This calls the global function `customElements.define`. Just import, then use
|
|
51
89
|
the tag in your HTML.
|
|
52
90
|
|
|
53
|
-
###
|
|
91
|
+
### Bundler
|
|
92
|
+
|
|
93
|
+
#### JS
|
|
54
94
|
```js
|
|
55
95
|
import '@substrate-system/blur-hash'
|
|
56
96
|
```
|
|
57
97
|
|
|
58
|
-
|
|
98
|
+
#### HTML
|
|
59
99
|
```html
|
|
60
100
|
<div>
|
|
61
101
|
<blur-hash
|
|
@@ -69,28 +109,16 @@ import '@substrate-system/blur-hash'
|
|
|
69
109
|
</div>
|
|
70
110
|
```
|
|
71
111
|
|
|
72
|
-
###
|
|
73
|
-
Takes the following attributes
|
|
74
|
-
|
|
75
|
-
#### time
|
|
76
|
-
The time for css transitions and animation. This is set as a CSS variable.
|
|
77
|
-
|
|
78
|
-
#### placeholder
|
|
79
|
-
The string created by the blurhash algorithm. See [node example](#create-the-string).
|
|
80
|
-
|
|
81
|
-
#### width & height
|
|
82
|
-
The dimensions of the image
|
|
83
|
-
|
|
84
|
-
## pre-built JS
|
|
112
|
+
### pre-built JS
|
|
85
113
|
This package exposes minified JS files too. Copy them to a location that is
|
|
86
114
|
accessible to your web server, then link to them in HTML.
|
|
87
115
|
|
|
88
|
-
|
|
116
|
+
#### copy
|
|
89
117
|
```sh
|
|
90
118
|
cp ./node_modules/@substrate-system/blur-hash/dist/blur-hash.min.js ./public
|
|
91
119
|
```
|
|
92
120
|
|
|
93
|
-
|
|
121
|
+
#### HTML
|
|
94
122
|
```html
|
|
95
123
|
<script type="module" src="./blur-hash.min.js"></script>
|
|
96
124
|
```
|
package/dist/index.cjs
CHANGED
|
@@ -32,16 +32,18 @@ class BlurHash extends HTMLElement {
|
|
|
32
32
|
constructor() {
|
|
33
33
|
super();
|
|
34
34
|
const srcset = this.getAttribute("srcset");
|
|
35
|
-
const
|
|
36
|
-
|
|
35
|
+
const w = this.getAttribute("width");
|
|
36
|
+
const h = this.getAttribute("height");
|
|
37
|
+
this.style.width = "" + w;
|
|
38
|
+
this.style.height = "" + h;
|
|
37
39
|
document.body.style.setProperty(
|
|
38
40
|
"--blur-hash-time",
|
|
39
|
-
this.getAttribute("time") || "0.
|
|
41
|
+
this.getAttribute("time") || "0.8s"
|
|
40
42
|
);
|
|
41
43
|
this.innerHTML = `<canvas
|
|
42
44
|
class="blurry"
|
|
43
|
-
width=${
|
|
44
|
-
height=${
|
|
45
|
+
width=${w}
|
|
46
|
+
height=${h}
|
|
45
47
|
></canvas>
|
|
46
48
|
<img class="blurry"
|
|
47
49
|
${srcset ? `srcset="${srcset}"` : ""}
|
package/dist/index.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["import { decode } from 'blurhash'\nimport { createDebug } from '@bicycle-codes/debug'\nconst debug = createDebug()\n\n// for docuement.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'blur-hash': BlurHash\n }\n}\n\nexport class BlurHash extends HTMLElement {\n constructor () {\n super()\n const srcset = this.getAttribute('srcset')\n const
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAuB;AACvB,mBAA4B;AAC5B,MAAM,YAAQ,0BAAY;AASnB,MAAM,iBAAiB,YAAY;AAAA,EAX1C,OAW0C;AAAA;AAAA;AAAA,EACtC,cAAe;AACX,UAAM;AACN,UAAM,SAAS,KAAK,aAAa,QAAQ;AACzC,UAAM,
|
|
4
|
+
"sourcesContent": ["import { decode } from 'blurhash'\nimport { createDebug } from '@bicycle-codes/debug'\nconst debug = createDebug()\n\n// for docuement.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'blur-hash': BlurHash\n }\n}\n\nexport class BlurHash extends HTMLElement {\n constructor () {\n super()\n const srcset = this.getAttribute('srcset')\n const w = this.getAttribute('width')\n const h = this.getAttribute('height')\n\n this.style.width = '' + w\n this.style.height = '' + h\n\n document.body.style.setProperty('--blur-hash-time',\n this.getAttribute('time') || '0.8s')\n\n this.innerHTML = `<canvas\n class=\"blurry\"\n width=${w}\n height=${h}\n ></canvas>\n <img class=\"blurry\"\n ${srcset ? `srcset=\"${srcset}\"` : ''}\n alt=\"${this.getAttribute('alt')}\"\n content-visibility=\"${this.getAttribute('content-visibility') || 'auto'}\"\n decoding=\"${this.getAttribute('decoding') || 'async'}\"\n loading=\"${this.getAttribute('loading') || 'lazy'}\"\n class=\"image-element blurry\"\n src=\"${this.getAttribute('src')}\"\n />\n `\n }\n\n connectedCallback () {\n const width = parseInt(this.getAttribute('width') ?? '')\n const height = parseInt(this.getAttribute('height') ?? '')\n const placeholder = this.getAttribute('placeholder')\n if (!placeholder || !width || !height) {\n throw new Error('Missing attributes')\n }\n\n const pixels = decode(placeholder, width, height)\n const canvas = this.querySelector('canvas') as HTMLCanvasElement\n const ctx = canvas.getContext('2d')!\n const imageData = ctx.createImageData(width, height)\n imageData.data.set(pixels)\n ctx.putImageData(imageData, 0, 0)\n\n const img = this.querySelector('img')!\n\n img.addEventListener('load', () => {\n debug('loaded')\n canvas.style.display = 'none'\n img.classList.remove('blurry')\n img.classList.add('sharp')\n })\n\n debug('the image', img)\n }\n}\n\ncustomElements.define('blur-hash', BlurHash)\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAuB;AACvB,mBAA4B;AAC5B,MAAM,YAAQ,0BAAY;AASnB,MAAM,iBAAiB,YAAY;AAAA,EAX1C,OAW0C;AAAA;AAAA;AAAA,EACtC,cAAe;AACX,UAAM;AACN,UAAM,SAAS,KAAK,aAAa,QAAQ;AACzC,UAAM,IAAI,KAAK,aAAa,OAAO;AACnC,UAAM,IAAI,KAAK,aAAa,QAAQ;AAEpC,SAAK,MAAM,QAAQ,KAAK;AACxB,SAAK,MAAM,SAAS,KAAK;AAEzB,aAAS,KAAK,MAAM;AAAA,MAAY;AAAA,MAC5B,KAAK,aAAa,MAAM,KAAK;AAAA,IAAM;AAEvC,SAAK,YAAY;AAAA;AAAA,oBAEL,CAAC;AAAA,qBACA,CAAC;AAAA;AAAA;AAAA,cAGR,SAAS,WAAW,MAAM,MAAM,EAAE;AAAA,mBAC7B,KAAK,aAAa,KAAK,CAAC;AAAA,kCACT,KAAK,aAAa,oBAAoB,KAAK,MAAM;AAAA,wBAC3D,KAAK,aAAa,UAAU,KAAK,OAAO;AAAA,uBACzC,KAAK,aAAa,SAAS,KAAK,MAAM;AAAA;AAAA,mBAE1C,KAAK,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,EAGvC;AAAA,EAEA,oBAAqB;AACjB,UAAM,QAAQ,SAAS,KAAK,aAAa,OAAO,KAAK,EAAE;AACvD,UAAM,SAAS,SAAS,KAAK,aAAa,QAAQ,KAAK,EAAE;AACzD,UAAM,cAAc,KAAK,aAAa,aAAa;AACnD,QAAI,CAAC,eAAe,CAAC,SAAS,CAAC,QAAQ;AACnC,YAAM,IAAI,MAAM,oBAAoB;AAAA,IACxC;AAEA,UAAM,aAAS,wBAAO,aAAa,OAAO,MAAM;AAChD,UAAM,SAAS,KAAK,cAAc,QAAQ;AAC1C,UAAM,MAAM,OAAO,WAAW,IAAI;AAClC,UAAM,YAAY,IAAI,gBAAgB,OAAO,MAAM;AACnD,cAAU,KAAK,IAAI,MAAM;AACzB,QAAI,aAAa,WAAW,GAAG,CAAC;AAEhC,UAAM,MAAM,KAAK,cAAc,KAAK;AAEpC,QAAI,iBAAiB,QAAQ,MAAM;AAC/B,YAAM,QAAQ;AACd,aAAO,MAAM,UAAU;AACvB,UAAI,UAAU,OAAO,QAAQ;AAC7B,UAAI,UAAU,IAAI,OAAO;AAAA,IAC7B,CAAC;AAED,UAAM,aAAa,GAAG;AAAA,EAC1B;AACJ;AAEA,eAAe,OAAO,aAAa,QAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAA;KACxB;CACJ;AAED,qBAAa,QAAS,SAAQ,WAAW;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAA;KACxB;CACJ;AAED,qBAAa,QAAS,SAAQ,WAAW;;IA8BrC,iBAAiB;CA0BpB"}
|
package/dist/index.js
CHANGED
|
@@ -10,16 +10,18 @@ class BlurHash extends HTMLElement {
|
|
|
10
10
|
constructor() {
|
|
11
11
|
super();
|
|
12
12
|
const srcset = this.getAttribute("srcset");
|
|
13
|
-
const
|
|
14
|
-
|
|
13
|
+
const w = this.getAttribute("width");
|
|
14
|
+
const h = this.getAttribute("height");
|
|
15
|
+
this.style.width = "" + w;
|
|
16
|
+
this.style.height = "" + h;
|
|
15
17
|
document.body.style.setProperty(
|
|
16
18
|
"--blur-hash-time",
|
|
17
|
-
this.getAttribute("time") || "0.
|
|
19
|
+
this.getAttribute("time") || "0.8s"
|
|
18
20
|
);
|
|
19
21
|
this.innerHTML = `<canvas
|
|
20
22
|
class="blurry"
|
|
21
|
-
width=${
|
|
22
|
-
height=${
|
|
23
|
+
width=${w}
|
|
24
|
+
height=${h}
|
|
23
25
|
></canvas>
|
|
24
26
|
<img class="blurry"
|
|
25
27
|
${srcset ? `srcset="${srcset}"` : ""}
|
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["import { decode } from 'blurhash'\nimport { createDebug } from '@bicycle-codes/debug'\nconst debug = createDebug()\n\n// for docuement.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'blur-hash': BlurHash\n }\n}\n\nexport class BlurHash extends HTMLElement {\n constructor () {\n super()\n const srcset = this.getAttribute('srcset')\n const
|
|
5
|
-
"mappings": ";;AAAA,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,MAAM,QAAQ,YAAY;AASnB,MAAM,iBAAiB,YAAY;AAAA,EAX1C,OAW0C;AAAA;AAAA;AAAA,EACtC,cAAe;AACX,UAAM;AACN,UAAM,SAAS,KAAK,aAAa,QAAQ;AACzC,UAAM,
|
|
4
|
+
"sourcesContent": ["import { decode } from 'blurhash'\nimport { createDebug } from '@bicycle-codes/debug'\nconst debug = createDebug()\n\n// for docuement.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'blur-hash': BlurHash\n }\n}\n\nexport class BlurHash extends HTMLElement {\n constructor () {\n super()\n const srcset = this.getAttribute('srcset')\n const w = this.getAttribute('width')\n const h = this.getAttribute('height')\n\n this.style.width = '' + w\n this.style.height = '' + h\n\n document.body.style.setProperty('--blur-hash-time',\n this.getAttribute('time') || '0.8s')\n\n this.innerHTML = `<canvas\n class=\"blurry\"\n width=${w}\n height=${h}\n ></canvas>\n <img class=\"blurry\"\n ${srcset ? `srcset=\"${srcset}\"` : ''}\n alt=\"${this.getAttribute('alt')}\"\n content-visibility=\"${this.getAttribute('content-visibility') || 'auto'}\"\n decoding=\"${this.getAttribute('decoding') || 'async'}\"\n loading=\"${this.getAttribute('loading') || 'lazy'}\"\n class=\"image-element blurry\"\n src=\"${this.getAttribute('src')}\"\n />\n `\n }\n\n connectedCallback () {\n const width = parseInt(this.getAttribute('width') ?? '')\n const height = parseInt(this.getAttribute('height') ?? '')\n const placeholder = this.getAttribute('placeholder')\n if (!placeholder || !width || !height) {\n throw new Error('Missing attributes')\n }\n\n const pixels = decode(placeholder, width, height)\n const canvas = this.querySelector('canvas') as HTMLCanvasElement\n const ctx = canvas.getContext('2d')!\n const imageData = ctx.createImageData(width, height)\n imageData.data.set(pixels)\n ctx.putImageData(imageData, 0, 0)\n\n const img = this.querySelector('img')!\n\n img.addEventListener('load', () => {\n debug('loaded')\n canvas.style.display = 'none'\n img.classList.remove('blurry')\n img.classList.add('sharp')\n })\n\n debug('the image', img)\n }\n}\n\ncustomElements.define('blur-hash', BlurHash)\n"],
|
|
5
|
+
"mappings": ";;AAAA,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,MAAM,QAAQ,YAAY;AASnB,MAAM,iBAAiB,YAAY;AAAA,EAX1C,OAW0C;AAAA;AAAA;AAAA,EACtC,cAAe;AACX,UAAM;AACN,UAAM,SAAS,KAAK,aAAa,QAAQ;AACzC,UAAM,IAAI,KAAK,aAAa,OAAO;AACnC,UAAM,IAAI,KAAK,aAAa,QAAQ;AAEpC,SAAK,MAAM,QAAQ,KAAK;AACxB,SAAK,MAAM,SAAS,KAAK;AAEzB,aAAS,KAAK,MAAM;AAAA,MAAY;AAAA,MAC5B,KAAK,aAAa,MAAM,KAAK;AAAA,IAAM;AAEvC,SAAK,YAAY;AAAA;AAAA,oBAEL,CAAC;AAAA,qBACA,CAAC;AAAA;AAAA;AAAA,cAGR,SAAS,WAAW,MAAM,MAAM,EAAE;AAAA,mBAC7B,KAAK,aAAa,KAAK,CAAC;AAAA,kCACT,KAAK,aAAa,oBAAoB,KAAK,MAAM;AAAA,wBAC3D,KAAK,aAAa,UAAU,KAAK,OAAO;AAAA,uBACzC,KAAK,aAAa,SAAS,KAAK,MAAM;AAAA;AAAA,mBAE1C,KAAK,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,EAGvC;AAAA,EAEA,oBAAqB;AACjB,UAAM,QAAQ,SAAS,KAAK,aAAa,OAAO,KAAK,EAAE;AACvD,UAAM,SAAS,SAAS,KAAK,aAAa,QAAQ,KAAK,EAAE;AACzD,UAAM,cAAc,KAAK,aAAa,aAAa;AACnD,QAAI,CAAC,eAAe,CAAC,SAAS,CAAC,QAAQ;AACnC,YAAM,IAAI,MAAM,oBAAoB;AAAA,IACxC;AAEA,UAAM,SAAS,OAAO,aAAa,OAAO,MAAM;AAChD,UAAM,SAAS,KAAK,cAAc,QAAQ;AAC1C,UAAM,MAAM,OAAO,WAAW,IAAI;AAClC,UAAM,YAAY,IAAI,gBAAgB,OAAO,MAAM;AACnD,cAAU,KAAK,IAAI,MAAM;AACzB,QAAI,aAAa,WAAW,GAAG,CAAC;AAEhC,UAAM,MAAM,KAAK,cAAc,KAAK;AAEpC,QAAI,iBAAiB,QAAQ,MAAM;AAC/B,YAAM,QAAQ;AACd,aAAO,MAAM,UAAU;AACvB,UAAI,UAAU,OAAO,QAAQ;AAC7B,UAAI,UAAU,IAAI,OAAO;AAAA,IAC7B,CAAC;AAED,UAAM,aAAa,GAAG;AAAA,EAC1B;AACJ;AAEA,eAAe,OAAO,aAAa,QAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/index.min.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
var W=Object.create;var
|
|
1
|
+
var W=Object.create;var E=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var a=(e,t)=>E(e,"name",{value:t,configurable:!0});var ee=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports);var te=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of Q(t))!Y.call(e,s)&&s!==r&&E(e,s,{get:()=>t[s],enumerable:!(n=K(t,s))||n.enumerable});return e};var re=(e,t,r)=>(r=e!=null?W(X(e)):{},te(t||!e||!e.__esModule?E(r,"default",{value:e,enumerable:!0}):r,e));var H=ee((De,G)=>{"use strict";var d=1e3,g=d*60,F=g*60,f=F*24,le=f*7,ue=f*365.25;G.exports=function(e,t){t=t||{};var r=typeof e;if(r==="string"&&e.length>0)return he(e);if(r==="number"&&isFinite(e))return t.long?Ce(e):me(e);throw new Error("val is not a non-empty string or a valid number. val="+JSON.stringify(e))};function he(e){if(e=String(e),!(e.length>100)){var t=/^(-?(?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|weeks?|w|years?|yrs?|y)?$/i.exec(e);if(t){var r=parseFloat(t[1]),n=(t[2]||"ms").toLowerCase();switch(n){case"years":case"year":case"yrs":case"yr":case"y":return r*ue;case"weeks":case"week":case"w":return r*le;case"days":case"day":case"d":return r*f;case"hours":case"hour":case"hrs":case"hr":case"h":return r*F;case"minutes":case"minute":case"mins":case"min":case"m":return r*g;case"seconds":case"second":case"secs":case"sec":case"s":return r*d;case"milliseconds":case"millisecond":case"msecs":case"msec":case"ms":return r;default:return}}}}a(he,"parse");function me(e){var t=Math.abs(e);return t>=f?Math.round(e/f)+"d":t>=F?Math.round(e/F)+"h":t>=g?Math.round(e/g)+"m":t>=d?Math.round(e/d)+"s":e+"ms"}a(me,"fmtShort");function Ce(e){var t=Math.abs(e);return t>=f?y(e,t,f,"day"):t>=F?y(e,t,F,"hour"):t>=g?y(e,t,g,"minute"):t>=d?y(e,t,d,"second"):e+" ms"}a(Ce,"fmtLong");function y(e,t,r,n){var s=t>=r*1.5;return Math.round(e/r)+" "+n+(s?"s":"")}a(y,"plural")});var ne=["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","#","$","%","*","+",",","-",".",":",";","=","?","@","[","]","^","_","{","|","}","~"],p=a(e=>{let t=0;for(let r=0;r<e.length;r++){let n=e[r],s=ne.indexOf(n);t=t*83+s}return t},"x");var x=a(e=>{let t=e/255;return t<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)},"f"),A=a(e=>{let t=Math.max(0,Math.min(1,e));return t<=.0031308?Math.trunc(t*12.92*255+.5):Math.trunc((1.055*Math.pow(t,.4166666666666667)-.055)*255+.5)},"h"),ae=a(e=>e<0?-1:1,"F"),D=a((e,t)=>ae(e)*Math.pow(Math.abs(e),t),"M"),B=class extends Error{static{a(this,"d")}constructor(e){super(e),this.name="ValidationError",this.message=e}},se=a(e=>{if(!e||e.length<6)throw new B("The blurhash string must be at least 6 characters");let t=p(e[0]),r=Math.floor(t/9)+1,n=t%9+1;if(e.length!==4+2*n*r)throw new B(`blurhash length mismatch: length is ${e.length} but it should be ${4+2*n*r}`)},"C");var oe=a(e=>{let t=e>>16,r=e>>8&255,n=e&255;return[x(t),x(r),x(n)]},"z"),ie=a((e,t)=>{let r=Math.floor(e/361),n=Math.floor(e/19)%19,s=e%19;return[D((r-9)/9,2)*t,D((n-9)/9,2)*t,D((s-9)/9,2)*t]},"L"),ce=a((e,t,r,n)=>{se(e),n=n|1;let s=p(e[0]),l=Math.floor(s/9)+1,h=s%9+1,u=(p(e[1])+1)/166,i=new Array(h*l);for(let o=0;o<i.length;o++)if(o===0){let c=p(e.substring(2,6));i[o]=oe(c)}else{let c=p(e.substring(4+o*2,6+o*2));i[o]=ie(c,u*n)}let m=t*4,C=new Uint8ClampedArray(m*r);for(let o=0;o<r;o++)for(let c=0;c<t;c++){let T=0,_=0,O=0;for(let M=0;M<l;M++)for(let b=0;b<h;b++){let v=Math.cos(Math.PI*c*b/t)*Math.cos(Math.PI*o*M/r),w=i[b+M*h];T+=w[0]*v,_+=w[1]*v,O+=w[2]*v}let J=A(T),j=A(_),Z=A(O);C[4*c+0+o*m]=J,C[4*c+1+o*m]=j,C[4*c+2+o*m]=Z,C[4*c+3+o*m]=255}return C},"U"),U=ce;function N(e){return e instanceof Error?e.stack||e.message:String(e)}a(N,"coerce");function P(e,t){let r=0;for(let n=0;n<e.length;n++)r=(r<<5)-r+e.charCodeAt(n),r|=0;return t[Math.abs(r)%t.length]}a(P,"selectColor");function R(e){return e.split(/[\s,]+/).filter(Boolean).map(n=>n.replace(/\*/g,".*?")).map(n=>new RegExp("^"+n+"$"))}a(R,"createRegexFromEnvVar");function k(e=6){return Math.random().toString(20).substring(2,e)}a(k,"generateRandomString");var z=re(H(),1);var fe=["#0000CC","#0000FF","#0033CC","#0033FF","#0066CC","#0066FF","#0099CC","#0099FF","#00CC00","#00CC33","#00CC66","#00CC99","#00CCCC","#00CCFF","#3300CC","#3300FF","#3333CC","#3333FF","#3366CC","#3366FF","#3399CC","#3399FF","#33CC00","#33CC33","#33CC66","#33CC99","#33CCCC","#33CCFF","#6600CC","#6600FF","#6633CC","#6633FF","#66CC00","#66CC33","#9900CC","#9900FF","#9933CC","#9933FF","#99CC00","#99CC33","#CC0000","#CC0033","#CC0066","#CC0099","#CC00CC","#CC00FF","#CC3300","#CC3333","#CC3366","#CC3399","#CC33CC","#CC33FF","#CC6600","#CC6633","#CC9900","#CC9933","#CCCC00","#CCCC33","#FF0000","#FF0033","#FF0066","#FF0099","#FF00CC","#FF00FF","#FF3300","#FF3333","#FF3366","#FF3399","#FF33CC","#FF33FF","#FF6600","#FF6633","#FF9900","#FF9933","#FFCC00","#FFCC33"],de=console.log||(()=>{}),V="",L=a(e=>(...t)=>{},"createDebug"),I=import.meta?.env?.VITE_DEBUG_MODE||"",$=[];I&&($=(I&&I.split(",")).map(e=>e.trim())||[]);(import.meta?.env?.DEV||import.meta?.env?.VITE_DEBUG||$.length&&$.includes(import.meta.env.MODE))&&(L=a(function(t){let r=Number(new Date);V||(V=k(10));let n=P(t||V,fe);return a(function(...l){if(ge(t))return pe(t||"DEV",l,{prevTime:r,color:n})},"debug")},"createDebug"));function ge(e){return e===void 0&&(import.meta&&import.meta.env?.DEV||import.meta.env?.VITE_DEBUG_MODE&&import.meta&&import.meta.env&&import.meta.env.MODE===import.meta.env.VITE_DEBUG_MODE)?!0:!e||!import.meta.env||!import.meta.env.VITE_DEBUG?!1:R(import.meta.env?.VITE_DEBUG).some(r=>r.test(e))}a(ge,"isEnabled");function Fe(){return{j:a(function(e){try{return JSON.stringify(e)}catch(t){return"[UnexpectedJSONParseError]: "+String(t)}},"j")}}a(Fe,"createFormatters");function pe(e,t,{prevTime:r,color:n}){let s=Number(new Date),l=s-(r||s);r=s,t[0]=N(t[0]);let h=Fe();typeof t[0]!="string"&&t.unshift("%O");let u=0;t[0]=t[0].replace(/%([a-zA-Z%])/g,(m,C)=>{if(m==="%%")return"%";u++;let o=h[C];if(typeof o=="function"){let c=t[u];m=o.call(self,c),t.splice(u,1),u--}return m});let i=be({diff:l,color:n,useColors:Me(),namespace:e},t);de(...i)}a(pe,"logger");function Me(){return typeof navigator<"u"&&navigator.userAgent&&navigator.userAgent.toLowerCase().match(/(edge|trident)\/(\d+)/)?!1:!!(typeof document<"u"&&document.documentElement&&document.documentElement.style&&document.documentElement.style.webkitAppearance||typeof navigator<"u"&&navigator.userAgent&&navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/)&&parseInt(RegExp.$1,10)>=31||typeof navigator<"u"&&navigator.userAgent&&navigator.userAgent.toLowerCase().match(/applewebkit\/(\d+)/))}a(Me,"shouldUseColors");function be({diff:e,color:t,namespace:r,useColors:n},s){if(s[0]=(n?"%c":"")+r+(n?" %c":" ")+s[0]+(n?"%c ":" ")+"+"+(0,z.default)(e),!n)return;let l="color: "+t;s.splice(1,0,l,"color: inherit");let h=0,u=0;return s[0].replace(/%[a-zA-Z%]/g,i=>{i!=="%%"&&(h++,i==="%c"&&(u=h))}),s.splice(u,0,l),s}a(be,"formatArgs");var q=L(),S=class extends HTMLElement{static{a(this,"BlurHash")}constructor(){super();let t=this.getAttribute("srcset"),r=this.getAttribute("width"),n=this.getAttribute("height");this.style.width=""+r,this.style.height=""+n,document.body.style.setProperty("--blur-hash-time",this.getAttribute("time")||"0.8s"),this.innerHTML=`<canvas
|
|
2
2
|
class="blurry"
|
|
3
|
-
width=${
|
|
4
|
-
height=${
|
|
3
|
+
width=${r}
|
|
4
|
+
height=${n}
|
|
5
5
|
></canvas>
|
|
6
6
|
<img class="blurry"
|
|
7
7
|
${t?`srcset="${t}"`:""}
|
|
@@ -12,5 +12,5 @@ var W=Object.create;var w=Object.defineProperty;var K=Object.getOwnPropertyDescr
|
|
|
12
12
|
class="image-element blurry"
|
|
13
13
|
src="${this.getAttribute("src")}"
|
|
14
14
|
/>
|
|
15
|
-
`}connectedCallback(){let t=parseInt(this.getAttribute("width")??""),r=parseInt(this.getAttribute("height")??""),n=this.getAttribute("placeholder");if(!n||!t||!r)throw new Error("Missing attributes");let
|
|
15
|
+
`}connectedCallback(){let t=parseInt(this.getAttribute("width")??""),r=parseInt(this.getAttribute("height")??""),n=this.getAttribute("placeholder");if(!n||!t||!r)throw new Error("Missing attributes");let s=U(n,t,r),l=this.querySelector("canvas"),h=l.getContext("2d"),u=h.createImageData(t,r);u.data.set(s),h.putImageData(u,0,0);let i=this.querySelector("img");i.addEventListener("load",()=>{q("loaded"),l.style.display="none",i.classList.remove("blurry"),i.classList.add("sharp")}),q("the image",i)}};customElements.define("blur-hash",S);export{S as BlurHash};
|
|
16
16
|
//# sourceMappingURL=index.min.js.map
|
package/dist/index.min.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../node_modules/ms/index.js", "../node_modules/blurhash/src/base83.ts", "../node_modules/blurhash/src/utils.ts", "../node_modules/blurhash/src/error.ts", "../node_modules/blurhash/src/decode.ts", "../node_modules/blurhash/src/encode.ts", "../node_modules/@bicycle-codes/debug/src/common.ts", "../node_modules/@bicycle-codes/debug/src/browser.ts", "../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Helpers.\n */\n\nvar s = 1000;\nvar m = s * 60;\nvar h = m * 60;\nvar d = h * 24;\nvar w = d * 7;\nvar y = d * 365.25;\n\n/**\n * Parse or format the given `val`.\n *\n * Options:\n *\n * - `long` verbose formatting [false]\n *\n * @param {String|Number} val\n * @param {Object} [options]\n * @throws {Error} throw an error if val is not a non-empty string or a number\n * @return {String|Number}\n * @api public\n */\n\nmodule.exports = function (val, options) {\n options = options || {};\n var type = typeof val;\n if (type === 'string' && val.length > 0) {\n return parse(val);\n } else if (type === 'number' && isFinite(val)) {\n return options.long ? fmtLong(val) : fmtShort(val);\n }\n throw new Error(\n 'val is not a non-empty string or a valid number. val=' +\n JSON.stringify(val)\n );\n};\n\n/**\n * Parse the given `str` and return milliseconds.\n *\n * @param {String} str\n * @return {Number}\n * @api private\n */\n\nfunction parse(str) {\n str = String(str);\n if (str.length > 100) {\n return;\n }\n var match = /^(-?(?:\\d+)?\\.?\\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|weeks?|w|years?|yrs?|y)?$/i.exec(\n str\n );\n if (!match) {\n return;\n }\n var n = parseFloat(match[1]);\n var type = (match[2] || 'ms').toLowerCase();\n switch (type) {\n case 'years':\n case 'year':\n case 'yrs':\n case 'yr':\n case 'y':\n return n * y;\n case 'weeks':\n case 'week':\n case 'w':\n return n * w;\n case 'days':\n case 'day':\n case 'd':\n return n * d;\n case 'hours':\n case 'hour':\n case 'hrs':\n case 'hr':\n case 'h':\n return n * h;\n case 'minutes':\n case 'minute':\n case 'mins':\n case 'min':\n case 'm':\n return n * m;\n case 'seconds':\n case 'second':\n case 'secs':\n case 'sec':\n case 's':\n return n * s;\n case 'milliseconds':\n case 'millisecond':\n case 'msecs':\n case 'msec':\n case 'ms':\n return n;\n default:\n return undefined;\n }\n}\n\n/**\n * Short format for `ms`.\n *\n * @param {Number} ms\n * @return {String}\n * @api private\n */\n\nfunction fmtShort(ms) {\n var msAbs = Math.abs(ms);\n if (msAbs >= d) {\n return Math.round(ms / d) + 'd';\n }\n if (msAbs >= h) {\n return Math.round(ms / h) + 'h';\n }\n if (msAbs >= m) {\n return Math.round(ms / m) + 'm';\n }\n if (msAbs >= s) {\n return Math.round(ms / s) + 's';\n }\n return ms + 'ms';\n}\n\n/**\n * Long format for `ms`.\n *\n * @param {Number} ms\n * @return {String}\n * @api private\n */\n\nfunction fmtLong(ms) {\n var msAbs = Math.abs(ms);\n if (msAbs >= d) {\n return plural(ms, msAbs, d, 'day');\n }\n if (msAbs >= h) {\n return plural(ms, msAbs, h, 'hour');\n }\n if (msAbs >= m) {\n return plural(ms, msAbs, m, 'minute');\n }\n if (msAbs >= s) {\n return plural(ms, msAbs, s, 'second');\n }\n return ms + ' ms';\n}\n\n/**\n * Pluralization helper.\n */\n\nfunction plural(ms, msAbs, n, name) {\n var isPlural = msAbs >= n * 1.5;\n return Math.round(ms / n) + ' ' + name + (isPlural ? 's' : '');\n}\n", "const digitCharacters = [\n \"0\",\n \"1\",\n \"2\",\n \"3\",\n \"4\",\n \"5\",\n \"6\",\n \"7\",\n \"8\",\n \"9\",\n \"A\",\n \"B\",\n \"C\",\n \"D\",\n \"E\",\n \"F\",\n \"G\",\n \"H\",\n \"I\",\n \"J\",\n \"K\",\n \"L\",\n \"M\",\n \"N\",\n \"O\",\n \"P\",\n \"Q\",\n \"R\",\n \"S\",\n \"T\",\n \"U\",\n \"V\",\n \"W\",\n \"X\",\n \"Y\",\n \"Z\",\n \"a\",\n \"b\",\n \"c\",\n \"d\",\n \"e\",\n \"f\",\n \"g\",\n \"h\",\n \"i\",\n \"j\",\n \"k\",\n \"l\",\n \"m\",\n \"n\",\n \"o\",\n \"p\",\n \"q\",\n \"r\",\n \"s\",\n \"t\",\n \"u\",\n \"v\",\n \"w\",\n \"x\",\n \"y\",\n \"z\",\n \"#\",\n \"$\",\n \"%\",\n \"*\",\n \"+\",\n \",\",\n \"-\",\n \".\",\n \":\",\n \";\",\n \"=\",\n \"?\",\n \"@\",\n \"[\",\n \"]\",\n \"^\",\n \"_\",\n \"{\",\n \"|\",\n \"}\",\n \"~\",\n];\n\nexport const decode83 = (str: String) => {\n let value = 0;\n for (let i = 0; i < str.length; i++) {\n const c = str[i];\n const digit = digitCharacters.indexOf(c);\n value = value * 83 + digit;\n }\n return value;\n};\n\nexport const encode83 = (n: number, length: number): string => {\n var result = \"\";\n for (let i = 1; i <= length; i++) {\n let digit = (Math.floor(n) / Math.pow(83, length - i)) % 83;\n result += digitCharacters[Math.floor(digit)];\n }\n return result;\n};\n", "export const sRGBToLinear = (value: number) => {\n let v = value / 255;\n if (v <= 0.04045) {\n return v / 12.92;\n } else {\n return Math.pow((v + 0.055) / 1.055, 2.4);\n }\n};\n\nexport const linearTosRGB = (value: number) => {\n let v = Math.max(0, Math.min(1, value));\n if (v <= 0.0031308) {\n return Math.trunc(v * 12.92 * 255 + 0.5);\n } else {\n return Math.trunc((1.055 * Math.pow(v, 1 / 2.4) - 0.055) * 255 + 0.5);\n }\n};\n\nexport const sign = (n: number) => (n < 0 ? -1 : 1);\n\nexport const signPow = (val: number, exp: number) =>\n sign(val) * Math.pow(Math.abs(val), exp);\n", "export class ValidationError extends Error {\n constructor(message: string) {\n super(message);\n this.name = \"ValidationError\";\n this.message = message;\n }\n}\n", "import { decode83 } from \"./base83\";\nimport { sRGBToLinear, signPow, linearTosRGB } from \"./utils\";\nimport { ValidationError } from \"./error\";\n\n/**\n * Returns an error message if invalid or undefined if valid\n * @param blurhash\n */\nconst validateBlurhash = (blurhash: string) => {\n if (!blurhash || blurhash.length < 6) {\n throw new ValidationError(\n \"The blurhash string must be at least 6 characters\"\n );\n }\n\n const sizeFlag = decode83(blurhash[0]);\n const numY = Math.floor(sizeFlag / 9) + 1;\n const numX = (sizeFlag % 9) + 1;\n\n if (blurhash.length !== 4 + 2 * numX * numY) {\n throw new ValidationError(\n `blurhash length mismatch: length is ${\n blurhash.length\n } but it should be ${4 + 2 * numX * numY}`\n );\n }\n};\n\nexport const isBlurhashValid = (\n blurhash: string\n): { result: boolean; errorReason?: string } => {\n try {\n validateBlurhash(blurhash);\n } catch (error) {\n return { result: false, errorReason: error.message };\n }\n\n return { result: true };\n};\n\nconst decodeDC = (value: number) => {\n const intR = value >> 16;\n const intG = (value >> 8) & 255;\n const intB = value & 255;\n return [sRGBToLinear(intR), sRGBToLinear(intG), sRGBToLinear(intB)];\n};\n\nconst decodeAC = (value: number, maximumValue: number) => {\n const quantR = Math.floor(value / (19 * 19));\n const quantG = Math.floor(value / 19) % 19;\n const quantB = value % 19;\n\n const rgb = [\n signPow((quantR - 9) / 9, 2.0) * maximumValue,\n signPow((quantG - 9) / 9, 2.0) * maximumValue,\n signPow((quantB - 9) / 9, 2.0) * maximumValue,\n ];\n\n return rgb;\n};\n\nconst decode = (\n blurhash: string,\n width: number,\n height: number,\n punch?: number\n) => {\n validateBlurhash(blurhash);\n\n punch = punch | 1;\n\n const sizeFlag = decode83(blurhash[0]);\n const numY = Math.floor(sizeFlag / 9) + 1;\n const numX = (sizeFlag % 9) + 1;\n\n const quantisedMaximumValue = decode83(blurhash[1]);\n const maximumValue = (quantisedMaximumValue + 1) / 166;\n\n const colors = new Array(numX * numY);\n\n for (let i = 0; i < colors.length; i++) {\n if (i === 0) {\n const value = decode83(blurhash.substring(2, 6));\n colors[i] = decodeDC(value);\n } else {\n const value = decode83(blurhash.substring(4 + i * 2, 6 + i * 2));\n colors[i] = decodeAC(value, maximumValue * punch);\n }\n }\n\n const bytesPerRow = width * 4;\n const pixels = new Uint8ClampedArray(bytesPerRow * height);\n\n for (let y = 0; y < height; y++) {\n for (let x = 0; x < width; x++) {\n let r = 0;\n let g = 0;\n let b = 0;\n\n for (let j = 0; j < numY; j++) {\n for (let i = 0; i < numX; i++) {\n const basis =\n Math.cos((Math.PI * x * i) / width) *\n Math.cos((Math.PI * y * j) / height);\n let color = colors[i + j * numX];\n r += color[0] * basis;\n g += color[1] * basis;\n b += color[2] * basis;\n }\n }\n\n let intR = linearTosRGB(r);\n let intG = linearTosRGB(g);\n let intB = linearTosRGB(b);\n\n pixels[4 * x + 0 + y * bytesPerRow] = intR;\n pixels[4 * x + 1 + y * bytesPerRow] = intG;\n pixels[4 * x + 2 + y * bytesPerRow] = intB;\n pixels[4 * x + 3 + y * bytesPerRow] = 255; // alpha\n }\n }\n return pixels;\n};\n\nexport default decode;\n", "import { encode83 } from \"./base83\";\nimport { sRGBToLinear, signPow, linearTosRGB } from \"./utils\";\nimport { ValidationError } from \"./error\";\n\ntype NumberTriplet = [number, number, number];\n\nconst bytesPerPixel = 4;\n\nconst multiplyBasisFunction = (\n pixels: Uint8ClampedArray,\n width: number,\n height: number,\n basisFunction: (i: number, j: number) => number\n): NumberTriplet => {\n let r = 0;\n let g = 0;\n let b = 0;\n const bytesPerRow = width * bytesPerPixel;\n\n for (let x = 0; x < width; x++) {\n const bytesPerPixelX = bytesPerPixel * x;\n\n for (let y = 0; y < height; y++) {\n const basePixelIndex = bytesPerPixelX + y * bytesPerRow;\n const basis = basisFunction(x, y);\n r +=\n basis * sRGBToLinear(pixels[basePixelIndex]);\n g +=\n basis * sRGBToLinear(pixels[basePixelIndex + 1]);\n b +=\n basis * sRGBToLinear(pixels[basePixelIndex + 2]);\n }\n }\n\n let scale = 1 / (width * height);\n\n return [r * scale, g * scale, b * scale];\n};\n\nconst encodeDC = (value: NumberTriplet): number => {\n const roundedR = linearTosRGB(value[0]);\n const roundedG = linearTosRGB(value[1]);\n const roundedB = linearTosRGB(value[2]);\n return (roundedR << 16) + (roundedG << 8) + roundedB;\n};\n\nconst encodeAC = (value: NumberTriplet, maximumValue: number): number => {\n let quantR = Math.floor(\n Math.max(\n 0,\n Math.min(18, Math.floor(signPow(value[0] / maximumValue, 0.5) * 9 + 9.5))\n )\n );\n let quantG = Math.floor(\n Math.max(\n 0,\n Math.min(18, Math.floor(signPow(value[1] / maximumValue, 0.5) * 9 + 9.5))\n )\n );\n let quantB = Math.floor(\n Math.max(\n 0,\n Math.min(18, Math.floor(signPow(value[2] / maximumValue, 0.5) * 9 + 9.5))\n )\n );\n\n return quantR * 19 * 19 + quantG * 19 + quantB;\n};\n\nconst encode = (\n pixels: Uint8ClampedArray,\n width: number,\n height: number,\n componentX: number,\n componentY: number\n): string => {\n if (componentX < 1 || componentX > 9 || componentY < 1 || componentY > 9) {\n throw new ValidationError(\"BlurHash must have between 1 and 9 components\");\n }\n if (width * height * 4 !== pixels.length) {\n throw new ValidationError(\"Width and height must match the pixels array\");\n }\n\n let factors: Array<[number, number, number]> = [];\n for (let y = 0; y < componentY; y++) {\n for (let x = 0; x < componentX; x++) {\n const normalisation = x == 0 && y == 0 ? 1 : 2;\n const factor = multiplyBasisFunction(\n pixels,\n width,\n height,\n (i: number, j: number) =>\n normalisation *\n Math.cos((Math.PI * x * i) / width) *\n Math.cos((Math.PI * y * j) / height)\n );\n factors.push(factor);\n }\n }\n\n const dc = factors[0];\n const ac = factors.slice(1);\n\n let hash = \"\";\n\n let sizeFlag = componentX - 1 + (componentY - 1) * 9;\n hash += encode83(sizeFlag, 1);\n\n let maximumValue: number;\n if (ac.length > 0) {\n let actualMaximumValue = Math.max(...ac.map((val) => Math.max(...val)));\n let quantisedMaximumValue = Math.floor(\n Math.max(0, Math.min(82, Math.floor(actualMaximumValue * 166 - 0.5)))\n );\n maximumValue = (quantisedMaximumValue + 1) / 166;\n hash += encode83(quantisedMaximumValue, 1);\n } else {\n maximumValue = 1;\n hash += encode83(0, 1);\n }\n\n hash += encode83(encodeDC(dc), 4);\n\n ac.forEach((factor) => {\n hash += encode83(encodeAC(factor, maximumValue), 2);\n });\n\n return hash;\n};\n\nexport default encode;\n", null, null, "import { decode } from 'blurhash'\nimport { createDebug } from '@bicycle-codes/debug'\nconst debug = createDebug()\n\n// for docuement.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'blur-hash': BlurHash\n }\n}\n\nexport class BlurHash extends HTMLElement {\n constructor () {\n super()\n const srcset = this.getAttribute('srcset')\n const placeholder = this.getAttribute('placeholder')\n if (!placeholder) throw new Error('not placeholder')\n\n document.body.style.setProperty('--blur-hash-time',\n this.getAttribute('time') || '0.6s')\n\n this.innerHTML = `<canvas\n class=\"blurry\"\n width=${this.getAttribute('width')}\n height=${this.getAttribute('height')}\n ></canvas>\n <img class=\"blurry\"\n ${srcset ? `srcset=\"${srcset}\"` : ''}\n alt=\"${this.getAttribute('alt')}\"\n content-visibility=\"${this.getAttribute('content-visibility') || 'auto'}\"\n decoding=\"${this.getAttribute('decoding') || 'async'}\"\n loading=\"${this.getAttribute('loading') || 'lazy'}\"\n class=\"image-element blurry\"\n src=\"${this.getAttribute('src')}\"\n />\n `\n }\n\n connectedCallback () {\n const width = parseInt(this.getAttribute('width') ?? '')\n const height = parseInt(this.getAttribute('height') ?? '')\n const placeholder = this.getAttribute('placeholder')\n if (!placeholder || !width || !height) {\n throw new Error('Missing attributes')\n }\n\n const pixels = decode(placeholder, width, height)\n const canvas = this.querySelector('canvas') as HTMLCanvasElement\n const ctx = canvas.getContext('2d')!\n const imageData = ctx.createImageData(width, height)\n imageData.data.set(pixels)\n ctx.putImageData(imageData, 0, 0)\n\n const img = this.querySelector('img')!\n\n img.addEventListener('load', () => {\n debug('loaded')\n canvas.style.display = 'none'\n img.classList.remove('blurry')\n img.classList.add('sharp')\n })\n\n debug('the image', img)\n }\n}\n\ncustomElements.define('blur-hash', BlurHash)\n"],
|
|
5
|
-
"mappings": "gkBAAA,IAAAA,EAAAC,GAAA,CAAAC,GAAAC,IAAA,cAIA,IAAIC,EAAI,IACJC,EAAID,EAAI,GACRE,EAAID,EAAI,GACRE,EAAID,EAAI,GACRE,GAAID,EAAI,EACRE,GAAIF,EAAI,OAgBZJ,EAAO,QAAU,SAAUO,EAAKC,EAAS,CACvCA,EAAUA,GAAW,CAAC,EACtB,IAAIC,EAAO,OAAOF,EAClB,GAAIE,IAAS,UAAYF,EAAI,OAAS,EACpC,OAAOG,GAAMH,CAAG,EACX,GAAIE,IAAS,UAAY,SAASF,CAAG,EAC1C,OAAOC,EAAQ,KAAOG,GAAQJ,CAAG,EAAIK,GAASL,CAAG,EAEnD,MAAM,IAAI,MACR,wDACE,KAAK,UAAUA,CAAG,CACtB,CACF,EAUA,SAASG,GAAMG,EAAK,CAElB,GADAA,EAAM,OAAOA,CAAG,EACZ,EAAAA,EAAI,OAAS,KAGjB,KAAIC,EAAQ,mIAAmI,KAC7ID,CACF,EACA,GAAKC,EAGL,KAAIC,EAAI,WAAWD,EAAM,CAAC,CAAC,EACvBL,GAAQK,EAAM,CAAC,GAAK,MAAM,YAAY,EAC1C,OAAQL,EAAM,CACZ,IAAK,QACL,IAAK,OACL,IAAK,MACL,IAAK,KACL,IAAK,IACH,OAAOM,EAAIT,GACb,IAAK,QACL,IAAK,OACL,IAAK,IACH,OAAOS,EAAIV,GACb,IAAK,OACL,IAAK,MACL,IAAK,IACH,OAAOU,EAAIX,EACb,IAAK,QACL,IAAK,OACL,IAAK,MACL,IAAK,KACL,IAAK,IACH,OAAOW,EAAIZ,EACb,IAAK,UACL,IAAK,SACL,IAAK,OACL,IAAK,MACL,IAAK,IACH,OAAOY,EAAIb,EACb,IAAK,UACL,IAAK,SACL,IAAK,OACL,IAAK,MACL,IAAK,IACH,OAAOa,EAAId,EACb,IAAK,eACL,IAAK,cACL,IAAK,QACL,IAAK,OACL,IAAK,KACH,OAAOc,EACT,QACE,MACJ,GACF,CAvDSC,EAAAN,GAAA,SAiET,SAASE,GAASK,EAAI,CACpB,IAAIC,EAAQ,KAAK,IAAID,CAAE,EACvB,OAAIC,GAASd,EACJ,KAAK,MAAMa,EAAKb,CAAC,EAAI,IAE1Bc,GAASf,EACJ,KAAK,MAAMc,EAAKd,CAAC,EAAI,IAE1Be,GAAShB,EACJ,KAAK,MAAMe,EAAKf,CAAC,EAAI,IAE1BgB,GAASjB,EACJ,KAAK,MAAMgB,EAAKhB,CAAC,EAAI,IAEvBgB,EAAK,IACd,CAfSD,EAAAJ,GAAA,YAyBT,SAASD,GAAQM,EAAI,CACnB,IAAIC,EAAQ,KAAK,IAAID,CAAE,EACvB,OAAIC,GAASd,EACJe,EAAOF,EAAIC,EAAOd,EAAG,KAAK,EAE/Bc,GAASf,EACJgB,EAAOF,EAAIC,EAAOf,EAAG,MAAM,EAEhCe,GAAShB,EACJiB,EAAOF,EAAIC,EAAOhB,EAAG,QAAQ,EAElCgB,GAASjB,EACJkB,EAAOF,EAAIC,EAAOjB,EAAG,QAAQ,EAE/BgB,EAAK,KACd,CAfSD,EAAAL,GAAA,WAqBT,SAASQ,EAAOF,EAAIC,EAAOH,EAAGK,EAAM,CAClC,IAAIC,EAAWH,GAASH,EAAI,IAC5B,OAAO,KAAK,MAAME,EAAKF,CAAC,EAAI,IAAMK,GAAQC,EAAW,IAAM,GAC7D,CAHSL,EAAAG,EAAA,YC9JT,IAAMG,GAAkB,CACtB,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,GACF,EAEaC,EAAYC,EAAAC,GAAgB,CACvC,IAAIC,EAAQ,EACZ,QAAS,EAAI,EAAG,EAAID,EAAI,OAAQ,IAAK,CACnC,IAAM,EAAIA,EAAI,CAAA,EACRE,EAAQL,GAAgB,QAAQ,CAAC,EACvCI,EAAQA,EAAQ,GAAKC,CACvB,CACA,OAAOD,CACT,EARyB,KCtFlB,IAAME,EAAgBC,EAAAC,GAAkB,CAC7C,IAAIC,EAAID,EAAQ,IAChB,OAAIC,GAAK,OACAA,EAAI,MAEJ,KAAK,KAAKA,EAAI,MAAS,MAAO,GAAG,CAE5C,EAP6B,KAShBC,EAAgBH,EAAAC,GAAkB,CAC7C,IAAIC,EAAI,KAAK,IAAI,EAAG,KAAK,IAAI,EAAGD,CAAK,CAAC,EACtC,OAAIC,GAAK,SACA,KAAK,MAAMA,EAAI,MAAQ,IAAM,EAAG,EAEhC,KAAK,OAAO,MAAQ,KAAK,IAAIA,EAAG,iBAAO,EAAI,MAAS,IAAM,EAAG,CAExE,EAP6B,KAShBE,GAAQJ,EAAAC,GAAeA,EAAI,EAAI,GAAK,EAA5B,KAERI,EAAUL,EAAA,CAACC,EAAaC,IACnCE,GAAKH,CAAG,EAAI,KAAK,IAAI,KAAK,IAAIA,CAAG,EAAGC,CAAG,EADlB,KCpBVI,EAAN,cAA8B,KAAM,CFA3C,MEA2C,CAAAN,EAAA,UACzC,YAAY,EAAiB,CAC3B,MAAM,CAAO,EACb,KAAK,KAAO,kBACZ,KAAK,QAAU,CACjB,CACF,ECEMO,GAAoBP,EAAAC,GAAqB,CAC7C,GAAI,CAACA,GAAYA,EAAS,OAAS,EACjC,MAAM,IAAIK,EACR,mDACF,EAGF,IAAMJ,EAAWM,EAASP,EAAS,CAAA,CAAE,EAC/B,EAAO,KAAK,MAAMC,EAAW,CAAC,EAAI,EAClC,EAAQA,EAAW,EAAK,EAE9B,GAAID,EAAS,SAAW,EAAI,EAAI,EAAO,EACrC,MAAM,IAAIK,EACR,uCACEL,EAAS,MAAA,qBACU,EAAI,EAAI,EAAO,CAAA,EACtC,CAEJ,EAlB0B,KAA1B,IAgCMQ,GAAYC,EAAAC,GAAkB,CAClC,IAAMC,EAAOD,GAAS,GAChB,EAAQA,GAAS,EAAK,IACtB,EAAOA,EAAQ,IACrB,MAAO,CAACE,EAAaD,CAAI,EAAGC,EAAa,CAAI,EAAGA,EAAa,CAAI,CAAC,CACpE,EALkB,KAOZC,GAAWJ,EAAA,CAACC,EAAeC,IAAyB,CACxD,IAAM,EAAS,KAAK,MAAMD,EAAS,GAAQ,EACrC,EAAS,KAAK,MAAMA,EAAQ,EAAE,EAAI,GAClCI,EAASJ,EAAQ,GAQvB,MANY,CACVK,GAAS,EAAS,GAAK,EAAG,CAAG,EAAIJ,EACjCI,GAAS,EAAS,GAAK,EAAG,CAAG,EAAIJ,EACjCI,GAASD,EAAS,GAAK,EAAG,CAAG,EAAIH,CACnC,CAGF,EAZiB,KAcXK,GAASP,EAAA,CACbC,EACAC,EACA,EACA,IACG,CACHM,GAAiBP,CAAQ,EAEzB,EAAQ,EAAQ,EAEhB,IAAMI,EAAWI,EAASR,EAAS,CAAA,CAAE,EAC/BS,EAAO,KAAK,MAAML,EAAW,CAAC,EAAI,EAClCM,EAAQN,EAAW,EAAK,EAGxBO,GADwBH,EAASR,EAAS,CAAA,CAAE,EACJ,GAAK,IAE7CY,EAAS,IAAI,MAAMF,EAAOD,CAAI,EAEpC,
|
|
6
|
-
"names": ["require_ms", "__commonJSMin", "exports", "module", "s", "m", "h", "d", "w", "y", "val", "options", "type", "parse", "fmtLong", "fmtShort", "str", "match", "n", "__name", "ms", "msAbs", "plural", "name", "isPlural", "q", "x", "__name", "t", "e", "l", "f", "__name", "t", "e", "h", "F", "M", "d", "C", "x", "z", "__name", "t", "e", "f", "L", "l", "M", "U", "C", "x", "m", "b", "i", "u", "
|
|
4
|
+
"sourcesContent": ["/**\n * Helpers.\n */\n\nvar s = 1000;\nvar m = s * 60;\nvar h = m * 60;\nvar d = h * 24;\nvar w = d * 7;\nvar y = d * 365.25;\n\n/**\n * Parse or format the given `val`.\n *\n * Options:\n *\n * - `long` verbose formatting [false]\n *\n * @param {String|Number} val\n * @param {Object} [options]\n * @throws {Error} throw an error if val is not a non-empty string or a number\n * @return {String|Number}\n * @api public\n */\n\nmodule.exports = function (val, options) {\n options = options || {};\n var type = typeof val;\n if (type === 'string' && val.length > 0) {\n return parse(val);\n } else if (type === 'number' && isFinite(val)) {\n return options.long ? fmtLong(val) : fmtShort(val);\n }\n throw new Error(\n 'val is not a non-empty string or a valid number. val=' +\n JSON.stringify(val)\n );\n};\n\n/**\n * Parse the given `str` and return milliseconds.\n *\n * @param {String} str\n * @return {Number}\n * @api private\n */\n\nfunction parse(str) {\n str = String(str);\n if (str.length > 100) {\n return;\n }\n var match = /^(-?(?:\\d+)?\\.?\\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|weeks?|w|years?|yrs?|y)?$/i.exec(\n str\n );\n if (!match) {\n return;\n }\n var n = parseFloat(match[1]);\n var type = (match[2] || 'ms').toLowerCase();\n switch (type) {\n case 'years':\n case 'year':\n case 'yrs':\n case 'yr':\n case 'y':\n return n * y;\n case 'weeks':\n case 'week':\n case 'w':\n return n * w;\n case 'days':\n case 'day':\n case 'd':\n return n * d;\n case 'hours':\n case 'hour':\n case 'hrs':\n case 'hr':\n case 'h':\n return n * h;\n case 'minutes':\n case 'minute':\n case 'mins':\n case 'min':\n case 'm':\n return n * m;\n case 'seconds':\n case 'second':\n case 'secs':\n case 'sec':\n case 's':\n return n * s;\n case 'milliseconds':\n case 'millisecond':\n case 'msecs':\n case 'msec':\n case 'ms':\n return n;\n default:\n return undefined;\n }\n}\n\n/**\n * Short format for `ms`.\n *\n * @param {Number} ms\n * @return {String}\n * @api private\n */\n\nfunction fmtShort(ms) {\n var msAbs = Math.abs(ms);\n if (msAbs >= d) {\n return Math.round(ms / d) + 'd';\n }\n if (msAbs >= h) {\n return Math.round(ms / h) + 'h';\n }\n if (msAbs >= m) {\n return Math.round(ms / m) + 'm';\n }\n if (msAbs >= s) {\n return Math.round(ms / s) + 's';\n }\n return ms + 'ms';\n}\n\n/**\n * Long format for `ms`.\n *\n * @param {Number} ms\n * @return {String}\n * @api private\n */\n\nfunction fmtLong(ms) {\n var msAbs = Math.abs(ms);\n if (msAbs >= d) {\n return plural(ms, msAbs, d, 'day');\n }\n if (msAbs >= h) {\n return plural(ms, msAbs, h, 'hour');\n }\n if (msAbs >= m) {\n return plural(ms, msAbs, m, 'minute');\n }\n if (msAbs >= s) {\n return plural(ms, msAbs, s, 'second');\n }\n return ms + ' ms';\n}\n\n/**\n * Pluralization helper.\n */\n\nfunction plural(ms, msAbs, n, name) {\n var isPlural = msAbs >= n * 1.5;\n return Math.round(ms / n) + ' ' + name + (isPlural ? 's' : '');\n}\n", "const digitCharacters = [\n \"0\",\n \"1\",\n \"2\",\n \"3\",\n \"4\",\n \"5\",\n \"6\",\n \"7\",\n \"8\",\n \"9\",\n \"A\",\n \"B\",\n \"C\",\n \"D\",\n \"E\",\n \"F\",\n \"G\",\n \"H\",\n \"I\",\n \"J\",\n \"K\",\n \"L\",\n \"M\",\n \"N\",\n \"O\",\n \"P\",\n \"Q\",\n \"R\",\n \"S\",\n \"T\",\n \"U\",\n \"V\",\n \"W\",\n \"X\",\n \"Y\",\n \"Z\",\n \"a\",\n \"b\",\n \"c\",\n \"d\",\n \"e\",\n \"f\",\n \"g\",\n \"h\",\n \"i\",\n \"j\",\n \"k\",\n \"l\",\n \"m\",\n \"n\",\n \"o\",\n \"p\",\n \"q\",\n \"r\",\n \"s\",\n \"t\",\n \"u\",\n \"v\",\n \"w\",\n \"x\",\n \"y\",\n \"z\",\n \"#\",\n \"$\",\n \"%\",\n \"*\",\n \"+\",\n \",\",\n \"-\",\n \".\",\n \":\",\n \";\",\n \"=\",\n \"?\",\n \"@\",\n \"[\",\n \"]\",\n \"^\",\n \"_\",\n \"{\",\n \"|\",\n \"}\",\n \"~\",\n];\n\nexport const decode83 = (str: String) => {\n let value = 0;\n for (let i = 0; i < str.length; i++) {\n const c = str[i];\n const digit = digitCharacters.indexOf(c);\n value = value * 83 + digit;\n }\n return value;\n};\n\nexport const encode83 = (n: number, length: number): string => {\n var result = \"\";\n for (let i = 1; i <= length; i++) {\n let digit = (Math.floor(n) / Math.pow(83, length - i)) % 83;\n result += digitCharacters[Math.floor(digit)];\n }\n return result;\n};\n", "export const sRGBToLinear = (value: number) => {\n let v = value / 255;\n if (v <= 0.04045) {\n return v / 12.92;\n } else {\n return Math.pow((v + 0.055) / 1.055, 2.4);\n }\n};\n\nexport const linearTosRGB = (value: number) => {\n let v = Math.max(0, Math.min(1, value));\n if (v <= 0.0031308) {\n return Math.trunc(v * 12.92 * 255 + 0.5);\n } else {\n return Math.trunc((1.055 * Math.pow(v, 1 / 2.4) - 0.055) * 255 + 0.5);\n }\n};\n\nexport const sign = (n: number) => (n < 0 ? -1 : 1);\n\nexport const signPow = (val: number, exp: number) =>\n sign(val) * Math.pow(Math.abs(val), exp);\n", "export class ValidationError extends Error {\n constructor(message: string) {\n super(message);\n this.name = \"ValidationError\";\n this.message = message;\n }\n}\n", "import { decode83 } from \"./base83\";\nimport { sRGBToLinear, signPow, linearTosRGB } from \"./utils\";\nimport { ValidationError } from \"./error\";\n\n/**\n * Returns an error message if invalid or undefined if valid\n * @param blurhash\n */\nconst validateBlurhash = (blurhash: string) => {\n if (!blurhash || blurhash.length < 6) {\n throw new ValidationError(\n \"The blurhash string must be at least 6 characters\"\n );\n }\n\n const sizeFlag = decode83(blurhash[0]);\n const numY = Math.floor(sizeFlag / 9) + 1;\n const numX = (sizeFlag % 9) + 1;\n\n if (blurhash.length !== 4 + 2 * numX * numY) {\n throw new ValidationError(\n `blurhash length mismatch: length is ${\n blurhash.length\n } but it should be ${4 + 2 * numX * numY}`\n );\n }\n};\n\nexport const isBlurhashValid = (\n blurhash: string\n): { result: boolean; errorReason?: string } => {\n try {\n validateBlurhash(blurhash);\n } catch (error) {\n return { result: false, errorReason: error.message };\n }\n\n return { result: true };\n};\n\nconst decodeDC = (value: number) => {\n const intR = value >> 16;\n const intG = (value >> 8) & 255;\n const intB = value & 255;\n return [sRGBToLinear(intR), sRGBToLinear(intG), sRGBToLinear(intB)];\n};\n\nconst decodeAC = (value: number, maximumValue: number) => {\n const quantR = Math.floor(value / (19 * 19));\n const quantG = Math.floor(value / 19) % 19;\n const quantB = value % 19;\n\n const rgb = [\n signPow((quantR - 9) / 9, 2.0) * maximumValue,\n signPow((quantG - 9) / 9, 2.0) * maximumValue,\n signPow((quantB - 9) / 9, 2.0) * maximumValue,\n ];\n\n return rgb;\n};\n\nconst decode = (\n blurhash: string,\n width: number,\n height: number,\n punch?: number\n) => {\n validateBlurhash(blurhash);\n\n punch = punch | 1;\n\n const sizeFlag = decode83(blurhash[0]);\n const numY = Math.floor(sizeFlag / 9) + 1;\n const numX = (sizeFlag % 9) + 1;\n\n const quantisedMaximumValue = decode83(blurhash[1]);\n const maximumValue = (quantisedMaximumValue + 1) / 166;\n\n const colors = new Array(numX * numY);\n\n for (let i = 0; i < colors.length; i++) {\n if (i === 0) {\n const value = decode83(blurhash.substring(2, 6));\n colors[i] = decodeDC(value);\n } else {\n const value = decode83(blurhash.substring(4 + i * 2, 6 + i * 2));\n colors[i] = decodeAC(value, maximumValue * punch);\n }\n }\n\n const bytesPerRow = width * 4;\n const pixels = new Uint8ClampedArray(bytesPerRow * height);\n\n for (let y = 0; y < height; y++) {\n for (let x = 0; x < width; x++) {\n let r = 0;\n let g = 0;\n let b = 0;\n\n for (let j = 0; j < numY; j++) {\n for (let i = 0; i < numX; i++) {\n const basis =\n Math.cos((Math.PI * x * i) / width) *\n Math.cos((Math.PI * y * j) / height);\n let color = colors[i + j * numX];\n r += color[0] * basis;\n g += color[1] * basis;\n b += color[2] * basis;\n }\n }\n\n let intR = linearTosRGB(r);\n let intG = linearTosRGB(g);\n let intB = linearTosRGB(b);\n\n pixels[4 * x + 0 + y * bytesPerRow] = intR;\n pixels[4 * x + 1 + y * bytesPerRow] = intG;\n pixels[4 * x + 2 + y * bytesPerRow] = intB;\n pixels[4 * x + 3 + y * bytesPerRow] = 255; // alpha\n }\n }\n return pixels;\n};\n\nexport default decode;\n", "import { encode83 } from \"./base83\";\nimport { sRGBToLinear, signPow, linearTosRGB } from \"./utils\";\nimport { ValidationError } from \"./error\";\n\ntype NumberTriplet = [number, number, number];\n\nconst bytesPerPixel = 4;\n\nconst multiplyBasisFunction = (\n pixels: Uint8ClampedArray,\n width: number,\n height: number,\n basisFunction: (i: number, j: number) => number\n): NumberTriplet => {\n let r = 0;\n let g = 0;\n let b = 0;\n const bytesPerRow = width * bytesPerPixel;\n\n for (let x = 0; x < width; x++) {\n const bytesPerPixelX = bytesPerPixel * x;\n\n for (let y = 0; y < height; y++) {\n const basePixelIndex = bytesPerPixelX + y * bytesPerRow;\n const basis = basisFunction(x, y);\n r +=\n basis * sRGBToLinear(pixels[basePixelIndex]);\n g +=\n basis * sRGBToLinear(pixels[basePixelIndex + 1]);\n b +=\n basis * sRGBToLinear(pixels[basePixelIndex + 2]);\n }\n }\n\n let scale = 1 / (width * height);\n\n return [r * scale, g * scale, b * scale];\n};\n\nconst encodeDC = (value: NumberTriplet): number => {\n const roundedR = linearTosRGB(value[0]);\n const roundedG = linearTosRGB(value[1]);\n const roundedB = linearTosRGB(value[2]);\n return (roundedR << 16) + (roundedG << 8) + roundedB;\n};\n\nconst encodeAC = (value: NumberTriplet, maximumValue: number): number => {\n let quantR = Math.floor(\n Math.max(\n 0,\n Math.min(18, Math.floor(signPow(value[0] / maximumValue, 0.5) * 9 + 9.5))\n )\n );\n let quantG = Math.floor(\n Math.max(\n 0,\n Math.min(18, Math.floor(signPow(value[1] / maximumValue, 0.5) * 9 + 9.5))\n )\n );\n let quantB = Math.floor(\n Math.max(\n 0,\n Math.min(18, Math.floor(signPow(value[2] / maximumValue, 0.5) * 9 + 9.5))\n )\n );\n\n return quantR * 19 * 19 + quantG * 19 + quantB;\n};\n\nconst encode = (\n pixels: Uint8ClampedArray,\n width: number,\n height: number,\n componentX: number,\n componentY: number\n): string => {\n if (componentX < 1 || componentX > 9 || componentY < 1 || componentY > 9) {\n throw new ValidationError(\"BlurHash must have between 1 and 9 components\");\n }\n if (width * height * 4 !== pixels.length) {\n throw new ValidationError(\"Width and height must match the pixels array\");\n }\n\n let factors: Array<[number, number, number]> = [];\n for (let y = 0; y < componentY; y++) {\n for (let x = 0; x < componentX; x++) {\n const normalisation = x == 0 && y == 0 ? 1 : 2;\n const factor = multiplyBasisFunction(\n pixels,\n width,\n height,\n (i: number, j: number) =>\n normalisation *\n Math.cos((Math.PI * x * i) / width) *\n Math.cos((Math.PI * y * j) / height)\n );\n factors.push(factor);\n }\n }\n\n const dc = factors[0];\n const ac = factors.slice(1);\n\n let hash = \"\";\n\n let sizeFlag = componentX - 1 + (componentY - 1) * 9;\n hash += encode83(sizeFlag, 1);\n\n let maximumValue: number;\n if (ac.length > 0) {\n let actualMaximumValue = Math.max(...ac.map((val) => Math.max(...val)));\n let quantisedMaximumValue = Math.floor(\n Math.max(0, Math.min(82, Math.floor(actualMaximumValue * 166 - 0.5)))\n );\n maximumValue = (quantisedMaximumValue + 1) / 166;\n hash += encode83(quantisedMaximumValue, 1);\n } else {\n maximumValue = 1;\n hash += encode83(0, 1);\n }\n\n hash += encode83(encodeDC(dc), 4);\n\n ac.forEach((factor) => {\n hash += encode83(encodeAC(factor, maximumValue), 2);\n });\n\n return hash;\n};\n\nexport default encode;\n", null, null, "import { decode } from 'blurhash'\nimport { createDebug } from '@bicycle-codes/debug'\nconst debug = createDebug()\n\n// for docuement.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'blur-hash': BlurHash\n }\n}\n\nexport class BlurHash extends HTMLElement {\n constructor () {\n super()\n const srcset = this.getAttribute('srcset')\n const w = this.getAttribute('width')\n const h = this.getAttribute('height')\n\n this.style.width = '' + w\n this.style.height = '' + h\n\n document.body.style.setProperty('--blur-hash-time',\n this.getAttribute('time') || '0.8s')\n\n this.innerHTML = `<canvas\n class=\"blurry\"\n width=${w}\n height=${h}\n ></canvas>\n <img class=\"blurry\"\n ${srcset ? `srcset=\"${srcset}\"` : ''}\n alt=\"${this.getAttribute('alt')}\"\n content-visibility=\"${this.getAttribute('content-visibility') || 'auto'}\"\n decoding=\"${this.getAttribute('decoding') || 'async'}\"\n loading=\"${this.getAttribute('loading') || 'lazy'}\"\n class=\"image-element blurry\"\n src=\"${this.getAttribute('src')}\"\n />\n `\n }\n\n connectedCallback () {\n const width = parseInt(this.getAttribute('width') ?? '')\n const height = parseInt(this.getAttribute('height') ?? '')\n const placeholder = this.getAttribute('placeholder')\n if (!placeholder || !width || !height) {\n throw new Error('Missing attributes')\n }\n\n const pixels = decode(placeholder, width, height)\n const canvas = this.querySelector('canvas') as HTMLCanvasElement\n const ctx = canvas.getContext('2d')!\n const imageData = ctx.createImageData(width, height)\n imageData.data.set(pixels)\n ctx.putImageData(imageData, 0, 0)\n\n const img = this.querySelector('img')!\n\n img.addEventListener('load', () => {\n debug('loaded')\n canvas.style.display = 'none'\n img.classList.remove('blurry')\n img.classList.add('sharp')\n })\n\n debug('the image', img)\n }\n}\n\ncustomElements.define('blur-hash', BlurHash)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["require_ms", "__commonJSMin", "exports", "module", "s", "m", "h", "d", "w", "y", "val", "options", "type", "parse", "fmtLong", "fmtShort", "str", "match", "n", "__name", "ms", "msAbs", "plural", "name", "isPlural", "q", "x", "__name", "t", "e", "l", "f", "__name", "t", "e", "h", "F", "M", "d", "C", "x", "z", "__name", "t", "e", "f", "L", "l", "M", "U", "C", "x", "m", "b", "i", "u", "a", "c", "s", "y", "B", "R", "w", "P", "G", "T", "V", "h", "I", "E", "j", "coerce", "val", "__name", "selectColor", "namespace", "colors", "hash", "i", "createRegexFromEnvVar", "names", "word", "r", "generateRandomString", "length", "import_ms", "colors", "log", "randomNamespace", "createDebug", "__name", "_", "_args", "modeVar", "modes", "mode", "namespace", "prevTime", "generateRandomString", "color", "selectColor", "args", "isEnabled", "logger", "isEnabled", "namespace", "createRegexFromEnvVar", "regex", "__name", "createFormatters", "v", "error", "logger", "args", "prevTime", "color", "curr", "diff", "coerce", "formatters", "index", "match", "format", "formatter", "val", "_args", "formatArgs", "shouldUseColors", "log", "useColors", "humanize", "c", "lastC", "debug", "createDebug", "BlurHash", "__name", "srcset", "w", "h", "width", "height", "placeholder", "pixels", "j", "canvas", "ctx", "imageData", "img"]
|
|
7
7
|
}
|
package/dist/meta.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"inputs": {
|
|
3
3
|
"src/index.ts": {
|
|
4
|
-
"bytes":
|
|
4
|
+
"bytes": 2214,
|
|
5
5
|
"imports": [],
|
|
6
6
|
"format": "esm"
|
|
7
7
|
}
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"imports": [],
|
|
12
12
|
"exports": [],
|
|
13
13
|
"inputs": {},
|
|
14
|
-
"bytes":
|
|
14
|
+
"bytes": 3698
|
|
15
15
|
},
|
|
16
16
|
"dist/index.js": {
|
|
17
17
|
"imports": [
|
|
@@ -32,10 +32,10 @@
|
|
|
32
32
|
"entryPoint": "src/index.ts",
|
|
33
33
|
"inputs": {
|
|
34
34
|
"src/index.ts": {
|
|
35
|
-
"bytesInOutput":
|
|
35
|
+
"bytesInOutput": 1997
|
|
36
36
|
}
|
|
37
37
|
},
|
|
38
|
-
"bytes":
|
|
38
|
+
"bytes": 2183
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
}
|
package/dist/style.css
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
blur-hash {
|
|
2
2
|
overflow: hidden;
|
|
3
|
+
display: block;
|
|
3
4
|
}
|
|
4
5
|
|
|
5
6
|
blur-hash canvas {
|
|
@@ -9,16 +10,17 @@ blur-hash canvas {
|
|
|
9
10
|
|
|
10
11
|
blur-hash img {
|
|
11
12
|
transition: opacity 0.6s;
|
|
13
|
+
object-fit: cover;
|
|
12
14
|
}
|
|
13
15
|
|
|
14
16
|
blur-hash img.blurry {
|
|
15
|
-
opacity: 0.6;
|
|
17
|
+
opacity: var(--blur-hash-opacity, 0.6);
|
|
16
18
|
filter: blur(30px);
|
|
17
19
|
}
|
|
18
20
|
|
|
19
21
|
blur-hash img.sharp {
|
|
20
22
|
opacity: 1;
|
|
21
|
-
animation: sharpen 0.8s both;
|
|
23
|
+
animation: sharpen var(--blur-hash-time, 0.8s) both;
|
|
22
24
|
}
|
|
23
25
|
|
|
24
26
|
@keyframes sharpen {
|
|
@@ -30,4 +32,4 @@ blur-hash img.sharp {
|
|
|
30
32
|
}
|
|
31
33
|
}
|
|
32
34
|
|
|
33
|
-
/*# sourceMappingURL=data:application/json;base64,
|
|
35
|
+
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7SUFDSSxnQkFBZ0I7SUFDaEIsY0FBYztBQXFCbEI7O0FBbkJJO1FBQ0ksWUFBWTtRQUNaLGtCQUFrQjtJQUN0Qjs7QUFFQTtRQUNJLHdCQUF3QjtRQUN4QixpQkFBaUI7SUFXckI7O0FBVEk7WUFDSSxzQ0FBc0M7WUFDdEMsa0JBQWtCO1FBQ3RCOztBQUVBO1lBQ0ksVUFBVTtZQUNWLG1EQUFtRDtRQUN2RDs7QUFJUjtJQUNJO1FBQ0ksa0JBQWtCO0lBQ3RCO0lBQ0E7UUFDSTtJQUNKO0FBQ0oiLCJmaWxlIjoic3JjL2luZGV4LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImJsdXItaGFzaCB7XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICBkaXNwbGF5OiBibG9jaztcblxuICAgICYgY2FudmFzIHtcbiAgICAgICAgb3BhY2l0eTogMC42O1xuICAgICAgICBmaWx0ZXI6IGJsdXIoMzBweCk7XG4gICAgfVxuXG4gICAgJiBpbWcge1xuICAgICAgICB0cmFuc2l0aW9uOiBvcGFjaXR5IDAuNnM7XG4gICAgICAgIG9iamVjdC1maXQ6IGNvdmVyO1xuXG4gICAgICAgICYuYmx1cnJ5IHtcbiAgICAgICAgICAgIG9wYWNpdHk6IHZhcigtLWJsdXItaGFzaC1vcGFjaXR5LCAwLjYpO1xuICAgICAgICAgICAgZmlsdGVyOiBibHVyKDMwcHgpO1xuICAgICAgICB9XG5cbiAgICAgICAgJi5zaGFycCB7XG4gICAgICAgICAgICBvcGFjaXR5OiAxO1xuICAgICAgICAgICAgYW5pbWF0aW9uOiBzaGFycGVuIHZhcigtLWJsdXItaGFzaC10aW1lLCAwLjhzKSBib3RoO1xuICAgICAgICB9XG4gICAgfVxufVxuXG5Aa2V5ZnJhbWVzIHNoYXJwZW4ge1xuICAgIGZyb20ge1xuICAgICAgICBmaWx0ZXI6IGJsdXIoMzBweCk7XG4gICAgfVxuICAgIHRvIHtcbiAgICAgICAgZmlsdGVyOiBibHVyKDBweClcbiAgICB9XG59XG4iXX0= */
|
package/dist/style.min.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
blur-hash{overflow:hidden}blur-hash canvas{filter:blur(30px);opacity:.6}blur-hash img{transition:opacity .6s}blur-hash img.blurry{filter:blur(30px);opacity
|
|
2
|
-
/*# sourceMappingURL=data:application/json;base64,
|
|
1
|
+
blur-hash{display:block;overflow:hidden}blur-hash canvas{filter:blur(30px);opacity:.6}blur-hash img{object-fit:cover;transition:opacity .6s}blur-hash img.blurry{filter:blur(30px);opacity:var(--blur-hash-opacity,.6)}blur-hash img.sharp{animation:sharpen var(--blur-hash-time,.8s) both;opacity:1}@keyframes sharpen{0%{filter:blur(30px)}to{filter:blur(0)}}
|
|
2
|
+
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsVUFFSSxhQUFjLENBRGQsZUFzQkosQ0FuQkksaUJBRUksaUJBQWtCLENBRGxCLFVBRUosQ0FFQSxjQUVJLGdCQUFpQixDQURqQixzQkFZSixDQVRJLHFCQUVJLGlCQUFrQixDQURsQixtQ0FFSixDQUVBLG9CQUVJLGdEQUFtRCxDQURuRCxTQUVKLENBSVIsbUJBQ0ksR0FDSSxpQkFDSixDQUNBLEdBQ0ksY0FDSixDQUNKIiwiZmlsZSI6InNyYy9pbmRleC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJibHVyLWhhc2gge1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgZGlzcGxheTogYmxvY2s7XG5cbiAgICAmIGNhbnZhcyB7XG4gICAgICAgIG9wYWNpdHk6IDAuNjtcbiAgICAgICAgZmlsdGVyOiBibHVyKDMwcHgpO1xuICAgIH1cblxuICAgICYgaW1nIHtcbiAgICAgICAgdHJhbnNpdGlvbjogb3BhY2l0eSAwLjZzO1xuICAgICAgICBvYmplY3QtZml0OiBjb3ZlcjtcblxuICAgICAgICAmLmJsdXJyeSB7XG4gICAgICAgICAgICBvcGFjaXR5OiB2YXIoLS1ibHVyLWhhc2gtb3BhY2l0eSwgMC42KTtcbiAgICAgICAgICAgIGZpbHRlcjogYmx1cigzMHB4KTtcbiAgICAgICAgfVxuXG4gICAgICAgICYuc2hhcnAge1xuICAgICAgICAgICAgb3BhY2l0eTogMTtcbiAgICAgICAgICAgIGFuaW1hdGlvbjogc2hhcnBlbiB2YXIoLS1ibHVyLWhhc2gtdGltZSwgMC44cykgYm90aDtcbiAgICAgICAgfVxuICAgIH1cbn1cblxuQGtleWZyYW1lcyBzaGFycGVuIHtcbiAgICBmcm9tIHtcbiAgICAgICAgZmlsdGVyOiBibHVyKDMwcHgpO1xuICAgIH1cbiAgICB0byB7XG4gICAgICAgIGZpbHRlcjogYmx1cigwcHgpXG4gICAgfVxufVxuIl19 */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@substrate-system/blur-hash",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
4
|
"description": "A blurry placeholder image web component",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"build-bin": "mkdir -p dist/bin && esbuild ./bin/index.ts > ./dist/bin/index.js",
|
|
28
28
|
"start": "vite",
|
|
29
29
|
"preversion": "npm run lint",
|
|
30
|
-
"version": "auto-changelog -p --template keepachangelog --breaking-pattern 'BREAKING CHANGE:' && git add CHANGELOG.md",
|
|
30
|
+
"version": "markdown-toc --maxdepth 3 -i README.md && auto-changelog -p --template keepachangelog --breaking-pattern 'BREAKING CHANGE:' && git add CHANGELOG.md README.md",
|
|
31
31
|
"postversion": "git push --follow-tags && npm publish",
|
|
32
32
|
"prepublishOnly": "npm run build"
|
|
33
33
|
},
|
|
@@ -48,6 +48,7 @@
|
|
|
48
48
|
"eslint": "^8.57.0",
|
|
49
49
|
"eslint-config-standard": "^17.1.0",
|
|
50
50
|
"inkjet": "^3.0.0",
|
|
51
|
+
"markdown-toc": "^1.2.0",
|
|
51
52
|
"postcss": "^8.4.38",
|
|
52
53
|
"postcss-cli": "^11.0.0",
|
|
53
54
|
"postcss-nesting": "^12.1.5",
|
package/README.example.md
DELETED
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
# package name here
|
|
2
|
-
|
|
3
|
-
[](README.md)
|
|
4
|
-
[](README.md)
|
|
5
|
-
[](https://semver.org/)
|
|
6
|
-
[](package.json)
|
|
7
|
-
[](LICENSE)
|
|
8
|
-
|
|
9
|
-
`<package description goes here>`
|
|
10
|
-
|
|
11
|
-
[See a live demo](https://namespace.github.io/package-name/)
|
|
12
|
-
|
|
13
|
-
## install
|
|
14
|
-
|
|
15
|
-
Installation instructions
|
|
16
|
-
|
|
17
|
-
```sh
|
|
18
|
-
npm i -S @namespace/package
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
## API
|
|
22
|
-
|
|
23
|
-
This exposes ESM and common JS via [package.json `exports` field](https://nodejs.org/api/packages.html#exports).
|
|
24
|
-
|
|
25
|
-
### ESM
|
|
26
|
-
```js
|
|
27
|
-
import '@namespace/package/module'
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
### Common JS
|
|
31
|
-
```js
|
|
32
|
-
require('@namespace/package/module')
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
## CSS
|
|
36
|
-
|
|
37
|
-
### Import CSS
|
|
38
|
-
|
|
39
|
-
```js
|
|
40
|
-
import '@namespace/package-name/css'
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
Or minified:
|
|
44
|
-
```js
|
|
45
|
-
import '@namespace/package-name/css/min'
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
### Customize CSS via some variables
|
|
49
|
-
|
|
50
|
-
```css
|
|
51
|
-
component-name {
|
|
52
|
-
--example: pink;
|
|
53
|
-
}
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
## use
|
|
57
|
-
This calls the global function `customElements.define`. Just import, then use
|
|
58
|
-
the tag in your HTML.
|
|
59
|
-
|
|
60
|
-
### JS
|
|
61
|
-
```js
|
|
62
|
-
import '@namespace/package/module'
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
### HTML
|
|
66
|
-
```html
|
|
67
|
-
<div>
|
|
68
|
-
<example-component></example-component>
|
|
69
|
-
</div>
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
### pre-built JS
|
|
73
|
-
This package exposes minified JS files too. Copy them to a location that is
|
|
74
|
-
accessible to your web server, then link to them in HTML.
|
|
75
|
-
|
|
76
|
-
#### copy
|
|
77
|
-
```sh
|
|
78
|
-
cp ./node_modules/@namespace/package/dist/module.min.js ./public
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
#### HTML
|
|
82
|
-
```html
|
|
83
|
-
<script type="module" src="./module.min.js"></script>
|
|
84
|
-
```
|