@substrate-system/blur-hash 0.0.1 → 0.0.3

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 CHANGED
@@ -15,12 +15,15 @@ This is the ["blur-up" image loading technique](https://css-tricks.com/the-blur-
15
15
  <!-- toc -->
16
16
 
17
17
  - [install](#install)
18
- - [API](#api)
18
+ - [Modules](#modules)
19
19
  * [ESM](#esm)
20
20
  * [Common JS](#common-js)
21
+ - [API](#api)
21
22
  * [attributes](#attributes)
23
+ * [`.reset`](#reset)
22
24
  - [CSS](#css)
23
25
  * [Import CSS](#import-css)
26
+ * [variables](#variables)
24
27
  - [use](#use)
25
28
  * [Bundler](#bundler)
26
29
  * [pre-built JS](#pre-built-js)
@@ -35,7 +38,7 @@ This is the ["blur-up" image loading technique](https://css-tricks.com/the-blur-
35
38
  npm i -S @substrate-system/blur-hash
36
39
  ```
37
40
 
38
- ## API
41
+ ## Modules
39
42
 
40
43
  This exposes ESM and common JS via [package.json `exports` field](https://nodejs.org/api/packages.html#exports).
41
44
 
@@ -49,6 +52,8 @@ import '@substrate-system/blur-hash'
49
52
  require('@substrate-system/blur-hash')
50
53
  ```
51
54
 
55
+ ## API
56
+
52
57
  ### attributes
53
58
  Takes the following attributes
54
59
 
@@ -59,8 +64,39 @@ The time for css transitions and animation. This is set as a CSS variable.
59
64
  The string created by the blurhash algorithm. See [node example](#create-the-string).
60
65
 
61
66
  #### width & height
62
- The dimensions of the image
67
+ The dimensions for the image
68
+
69
+ ### `.reset`
70
+
71
+ Change the image, and do the blur-up thing again.
72
+
73
+ ```ts
74
+ reset (
75
+ newSrc:string,
76
+ alt:string,
77
+ placeholder:string,
78
+ newSrcset?:string|null,
79
+ newSizes?:string|null,
80
+ attrs:Partial<{
81
+ srcset:string|null;
82
+ width:string|null;
83
+ height:string|null;
84
+ time:number|null;
85
+ }> = {}
86
+ ):void
87
+ ```
63
88
 
89
+ #### example
90
+
91
+ ```js
92
+ document.querySelector('blur-hash')?.reset(
93
+ 'llamas.jpg',
94
+ 'some llamas',
95
+ 'UgI}q#%O%eNa?^I?awaf?aIVs*WBxZxaRjR*'
96
+ )
97
+ ```
98
+
99
+ -------------------------------------------------
64
100
 
65
101
 
66
102
  ## CSS
@@ -76,6 +112,15 @@ Or minified:
76
112
  import '@substrate-system/blur-hash/css/min'
77
113
  ```
78
114
 
115
+ ### variables
116
+
117
+ __CSS variables__
118
+
119
+ * `--blur-hash-time` -- the transition time for animating blurry -> sharp,
120
+ default is `0.8s`
121
+ * `--blur-hash-opactiy` -- the opacity to use for the placeholder image,
122
+ default is `0.2`
123
+
79
124
  ## use
80
125
  This calls the global function `customElements.define`. Just import, then use
81
126
  the tag in your HTML.
@@ -0,0 +1,31 @@
1
+ "use strict";
2
+ import yargs from "yargs";
3
+ import inkjet from "inkjet";
4
+ import { hideBin } from "yargs/helpers";
5
+ import { encode } from "blurhash";
6
+ import fs from "node:fs/promises";
7
+ import { resolve } from "node:path";
8
+ import { fileURLToPath } from "node:url";
9
+ import { imageSizeFromFile } from "image-size/fromFile";
10
+ export const encodeImageToBlurhash = async (filepath, width, height) => {
11
+ const data = await fs.readFile(filepath);
12
+ return new Promise((resolve2, reject) => {
13
+ inkjet.decode(data, function(err, decoded) {
14
+ if (err) return reject(err);
15
+ resolve2(encode(decoded.data, width, height, 4, 4));
16
+ });
17
+ });
18
+ };
19
+ const pathToThisFile = resolve(fileURLToPath(import.meta.url));
20
+ const pathPassedToNode = resolve(process.argv[1]);
21
+ const isThisFileBeingRunViaCLI = pathToThisFile.includes(pathPassedToNode);
22
+ if (isThisFileBeingRunViaCLI) {
23
+ const args = yargs(hideBin(process.argv)).demandCommand(1).command("filename", "the local filename to read").example(
24
+ "`npx blur my-fiile.jpg`",
25
+ "Create a small placeholder string from a local file"
26
+ ).usage("Usage: blur <filename>").argv;
27
+ const filename = args._[0];
28
+ const { width, height } = await imageSizeFromFile(filename);
29
+ const hash = await encodeImageToBlurhash(filename, width, height);
30
+ process.stdout.write(hash + "\n");
31
+ }
package/dist/index.cjs CHANGED
@@ -17,42 +17,62 @@ var __copyProps = (to, from, except, desc) => {
17
17
  return to;
18
18
  };
19
19
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
- var src_exports = {};
21
- __export(src_exports, {
20
+ var index_exports = {};
21
+ __export(index_exports, {
22
22
  BlurHash: () => BlurHash
23
23
  });
24
- module.exports = __toCommonJS(src_exports);
24
+ module.exports = __toCommonJS(index_exports);
25
+ var import_web_component = require("@substrate-system/web-component");
25
26
  var import_blurhash = require("blurhash");
26
- var import_debug = require("@bicycle-codes/debug");
27
- const debug = (0, import_debug.createDebug)();
28
- class BlurHash extends HTMLElement {
27
+ class BlurHash extends import_web_component.WebComponent.create("blur-hash") {
29
28
  static {
30
29
  __name(this, "BlurHash");
31
30
  }
31
+ time;
32
32
  constructor() {
33
33
  super();
34
- const srcset = this.getAttribute("srcset");
35
- const placeholder = this.getAttribute("placeholder");
36
- if (!placeholder) throw new Error("not placeholder");
34
+ const w = this.getAttribute("width");
35
+ const h = this.getAttribute("height");
36
+ const time = this.getAttribute("time");
37
+ this.time = time ? parseInt(time) : 800;
38
+ this.style.width = "" + w;
39
+ this.style.height = "" + h;
37
40
  document.body.style.setProperty(
38
41
  "--blur-hash-time",
39
- this.getAttribute("time") || "0.6s"
42
+ time ? "." + (parseInt(time) / 1e3 + "s") : "0.8s"
40
43
  );
41
- this.innerHTML = `<canvas
42
- class="blurry"
43
- width=${this.getAttribute("width")}
44
- height=${this.getAttribute("height")}
45
- ></canvas>
46
- <img class="blurry"
47
- ${srcset ? `srcset="${srcset}"` : ""}
48
- alt="${this.getAttribute("alt")}"
49
- content-visibility="${this.getAttribute("content-visibility") || "auto"}"
50
- decoding="${this.getAttribute("decoding") || "async"}"
51
- loading="${this.getAttribute("loading") || "lazy"}"
52
- class="image-element blurry"
53
- src="${this.getAttribute("src")}"
54
- />
55
- `;
44
+ }
45
+ /**
46
+ * Change the image, and do the blur-up thing again.
47
+ */
48
+ reset(newSrc, alt, placeholder, newSrcset, newSizes, attrs = {}) {
49
+ if (attrs.width) this.style.width = attrs.width;
50
+ if (attrs.height) this.style.height = attrs.height;
51
+ const width = attrs.width ? parseInt(attrs.width) : parseInt(this.style.width);
52
+ const height = attrs.height ? parseInt(attrs.height) : parseInt(this.style.height);
53
+ this.innerHTML = BlurHash.html({
54
+ srcset: attrs.srcset,
55
+ w: "" + width,
56
+ h: "" + height,
57
+ src: newSrc,
58
+ alt
59
+ });
60
+ const pixels = (0, import_blurhash.decode)(placeholder, width, height);
61
+ const canvas = this.querySelector("canvas");
62
+ const ctx = canvas.getContext("2d");
63
+ const imageData = ctx.createImageData(width, height);
64
+ imageData.data.set(pixels);
65
+ ctx.putImageData(imageData, 0, 0);
66
+ this.setAttribute("src", newSrc);
67
+ this.setAttribute("placeholder", placeholder);
68
+ const img = this.querySelector("img");
69
+ if (newSrcset) img.setAttribute("srcset", newSrcset);
70
+ if (newSizes) img.setAttribute("sizes", newSizes);
71
+ img.addEventListener("load", () => {
72
+ canvas.style.display = "none";
73
+ img.classList.remove("blurry");
74
+ img.classList.add("sharp");
75
+ });
56
76
  }
57
77
  connectedCallback() {
58
78
  const width = parseInt(this.getAttribute("width") ?? "");
@@ -61,6 +81,7 @@ class BlurHash extends HTMLElement {
61
81
  if (!placeholder || !width || !height) {
62
82
  throw new Error("Missing attributes");
63
83
  }
84
+ this.innerHTML = this.render();
64
85
  const pixels = (0, import_blurhash.decode)(placeholder, width, height);
65
86
  const canvas = this.querySelector("canvas");
66
87
  const ctx = canvas.getContext("2d");
@@ -69,12 +90,49 @@ class BlurHash extends HTMLElement {
69
90
  ctx.putImageData(imageData, 0, 0);
70
91
  const img = this.querySelector("img");
71
92
  img.addEventListener("load", () => {
72
- debug("loaded");
73
93
  canvas.style.display = "none";
74
94
  img.classList.remove("blurry");
75
95
  img.classList.add("sharp");
76
96
  });
77
- debug("the image", img);
97
+ }
98
+ static html(attrs) {
99
+ const {
100
+ srcset,
101
+ w,
102
+ h,
103
+ alt,
104
+ contentVisibility,
105
+ decoding,
106
+ loading,
107
+ src
108
+ } = attrs;
109
+ return `<canvas
110
+ class="blurry"
111
+ width=${w}
112
+ height=${h}
113
+ ></canvas>
114
+
115
+ <img class="blurry"
116
+ ${srcset ? `srcset="${srcset}"` : ""}
117
+ alt="${alt}"
118
+ content-visibility="${contentVisibility || "auto"}"
119
+ decoding="${decoding || "async"}"
120
+ loading="${loading || "lazy"}"
121
+ class="image-element blurry"
122
+ src="${src}"
123
+ />`;
124
+ }
125
+ render() {
126
+ const srcset = this.getAttribute("srcset");
127
+ const w = this.getAttribute("width");
128
+ const h = this.getAttribute("height");
129
+ const time = this.getAttribute("time");
130
+ this.time = time ? parseInt(time) : 800;
131
+ const src = this.getAttribute("src");
132
+ const alt = this.getAttribute("alt");
133
+ if (!src) throw new Error("Not src");
134
+ if (!alt) throw new Error("Not alt");
135
+ return BlurHash.html({ srcset, w, h, src, alt });
78
136
  }
79
137
  }
80
138
  customElements.define("blur-hash", BlurHash);
@@ -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 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": ";;;;;;;;;;;;;;;;;;;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,cAAc,KAAK,aAAa,aAAa;AACnD,QAAI,CAAC,YAAa,OAAM,IAAI,MAAM,iBAAiB;AAEnD,aAAS,KAAK,MAAM;AAAA,MAAY;AAAA,MAC5B,KAAK,aAAa,MAAM,KAAK;AAAA,IAAM;AAEvC,SAAK,YAAY;AAAA;AAAA,oBAEL,KAAK,aAAa,OAAO,CAAC;AAAA,qBACzB,KAAK,aAAa,QAAQ,CAAC;AAAA;AAAA;AAAA,cAGlC,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;",
4
+ "sourcesContent": ["import { WebComponent } from '@substrate-system/web-component'\nimport { decode } from 'blurhash'\n\n// for docuement.querySelector\ndeclare global {\n interface HTMLElementTagNameMap {\n 'blur-hash': BlurHash\n }\n}\n\nexport class BlurHash extends WebComponent.create('blur-hash') {\n time:number\n\n constructor () {\n super()\n // const srcset = this.getAttribute('srcset')\n const w = this.getAttribute('width')\n const h = this.getAttribute('height')\n const time = this.getAttribute('time')\n this.time = time ? parseInt(time) : 800\n\n this.style.width = '' + w\n this.style.height = '' + h\n\n document.body.style.setProperty('--blur-hash-time',\n time ? '.' + (parseInt(time) / 1000 + 's') : '0.8s')\n }\n\n /**\n * Change the image, and do the blur-up thing again.\n */\n reset (\n newSrc:string,\n alt:string,\n placeholder:string,\n newSrcset?:string|null,\n newSizes?:string|null,\n attrs:Partial<{\n srcset:string|null;\n width:string|null;\n height:string|null;\n time:number|null;\n }> = {}\n ):void {\n if (attrs.width) this.style.width = attrs.width\n if (attrs.height) this.style.height = attrs.height\n\n const width = (attrs.width ?\n parseInt(attrs.width) :\n parseInt(this.style.width))\n const height = (attrs.height ?\n parseInt(attrs.height) :\n parseInt(this.style.height))\n\n this.innerHTML = BlurHash.html({\n srcset: attrs.srcset,\n w: '' + width,\n h: '' + height,\n src: newSrc,\n alt\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 this.setAttribute('src', newSrc)\n this.setAttribute('placeholder', placeholder)\n\n const img = this.querySelector('img')!\n if (newSrcset) img.setAttribute('srcset', newSrcset)\n if (newSizes) img.setAttribute('sizes', newSizes)\n\n img.addEventListener('load', () => {\n canvas.style.display = 'none'\n img.classList.remove('blurry')\n img.classList.add('sharp')\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 this.innerHTML = this.render()\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 canvas.style.display = 'none'\n img.classList.remove('blurry')\n img.classList.add('sharp')\n })\n }\n\n static html (attrs:{\n alt:string;\n srcset?:string|null;\n w?:string|null;\n h?:string|null;\n time?:number;\n contentVisibility?:'visible'|'auto'|'hidden'|null;\n decoding?:'sync'|'async'|'auto'|null;\n loading?:'lazy'|'eager'|'auto'|null;\n src:string;\n }) {\n const {\n srcset,\n w,\n h,\n alt,\n contentVisibility,\n decoding,\n loading,\n src\n } = attrs\n\n return `<canvas\n class=\"blurry\"\n width=${w}\n height=${h}\n ></canvas>\n\n <img class=\"blurry\"\n ${srcset ? `srcset=\"${srcset}\"` : ''}\n alt=\"${alt}\"\n content-visibility=\"${contentVisibility || 'auto'}\"\n decoding=\"${decoding || 'async'}\"\n loading=\"${loading || 'lazy'}\"\n class=\"image-element blurry\"\n src=\"${src}\"\n />`\n }\n\n render ():string {\n const srcset = this.getAttribute('srcset')\n const w = this.getAttribute('width')\n const h = this.getAttribute('height')\n const time = this.getAttribute('time')\n this.time = time ? parseInt(time) : 800\n const src = this.getAttribute('src')\n const alt = this.getAttribute('alt')\n if (!src) throw new Error('Not src')\n if (!alt) throw new Error('Not alt')\n\n return BlurHash.html({ srcset, w, h, src, alt })\n }\n}\n\ncustomElements.define('blur-hash', BlurHash)\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }