ai-nevermore 0.0.5 → 0.0.7
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 +64 -2
- package/bin/nevermore +53 -1
- package/decoded.jpg +0 -0
- package/demo.html +24 -0
- package/demo.mjs +29 -0
- package/out.jpg +0 -0
- package/package.json +21 -4
- package/src/encoded-image-component.mjs +56 -0
- package/src/image.mjs +187 -0
- package/test.jpg +0 -0
- package/textures/A.jpg +0 -0
- package/textures/B.jpg +0 -0
- package/textures/C.jpg +0 -0
- package/textures/D.jpg +0 -0
- package/textures/E.jpg +0 -0
- package/textures/F.jpg +0 -0
- package/textures/G.jpg +0 -0
- package/textures/H.jpg +0 -0
- package/textures/I.jpg +0 -0
- package/textures/J.jpg +0 -0
- package/textures/K.jpg +0 -0
- package/textures/L.jpg +0 -0
- package/textures/M.jpg +0 -0
- package/textures/N.jpg +0 -0
- package/textures/O.jpg +0 -0
- package/textures/P.jpg +0 -0
- package/textures/Q.jpg +0 -0
- package/textures/R.jpg +0 -0
- package/textures/S.jpg +0 -0
- package/textures/T.jpg +0 -0
- package/textures/U.jpg +0 -0
- package/textures/V.jpg +0 -0
- package/textures/W.jpg +0 -0
- package/textures/X.jpg +0 -0
- package/textures/Y.jpg +0 -0
- package/textures/Z.jpg +0 -0
package/README.md
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
Nevermore
|
|
2
2
|
=========
|
|
3
3
|
|
|
4
|
-
Nevermore is a library to obfuscate
|
|
4
|
+
Nevermore is a library to obfuscate media on the web to prevent AI scraping.
|
|
5
|
+
|
|
6
|
+
Text
|
|
7
|
+
---
|
|
8
|
+
while a user will see
|
|
5
9
|
|
|
6
10
|
|
|
7
11
|
|
|
@@ -11,6 +15,44 @@ A scraper coming to your site will see something like
|
|
|
11
15
|
|
|
12
16
|
Which will both prevent the scraper from acquiring your content as well as [poisoning the model trained](https://en.wikipedia.org/wiki/Adversarial_machine_learning#Data_poisoning) from it.
|
|
13
17
|
|
|
18
|
+
Images
|
|
19
|
+
------
|
|
20
|
+
|
|
21
|
+
First you encode an image with:
|
|
22
|
+
|
|
23
|
+
`nevermore pseudoimage <target> --image-output <output> --encode`
|
|
24
|
+
|
|
25
|
+
which produces and encoded image, seemingly static filled.
|
|
26
|
+
|
|
27
|
+
Then you include the encoded image along with it's key(This uses the source directly, but it is also is compatible with your favorite build tool) the stub entries must point at any valid ESM file and are not used.
|
|
28
|
+
|
|
29
|
+
```html
|
|
30
|
+
<html>
|
|
31
|
+
<head>
|
|
32
|
+
<script type="importmap">
|
|
33
|
+
{"imports":{
|
|
34
|
+
"node:os":"<path-to-stub>",
|
|
35
|
+
"node:stream":"<path-to-stub>",
|
|
36
|
+
"fs":"<path-to-stub>",
|
|
37
|
+
"os":"<path-to-stub>",
|
|
38
|
+
"module":"<path-to-stub>",
|
|
39
|
+
"nevermore/encoded-image":"./node_modules/nevermore/src/encoded-image-component.mjs",
|
|
40
|
+
"@environment-safe/canvas":"./node_modules/@environment-safe/canvas/src/index.mjs",
|
|
41
|
+
"@environment-safe/file":"./node_modules/@environment-safe/file/src/index.mjs",
|
|
42
|
+
"@environment-safe/elements":"./node_modules/@environment-safe/elements/src/index.mjs",
|
|
43
|
+
"@environment-safe/runtime-context":"./node_modules/@environment-safe/runtime-context/src/index.mjs"
|
|
44
|
+
}}
|
|
45
|
+
</script>
|
|
46
|
+
<script type="module">
|
|
47
|
+
import 'nevermore/encoded-image';
|
|
48
|
+
</script>
|
|
49
|
+
</head>
|
|
50
|
+
<body>
|
|
51
|
+
<encoded-image src="encoded-image-location" key="VFYZT-HPTRG-PGHRT"></encoded-image>
|
|
52
|
+
</body>
|
|
53
|
+
</html>
|
|
54
|
+
```
|
|
55
|
+
|
|
14
56
|
Programmatic Usage
|
|
15
57
|
------------------
|
|
16
58
|
This library can be used to generate the html and css:
|
|
@@ -22,6 +64,19 @@ const { root, index } = await computeIndexKeys(inputText);
|
|
|
22
64
|
const { html, css } = await generateHTMLAndCSS(root, index);
|
|
23
65
|
```
|
|
24
66
|
|
|
67
|
+
You can programmatically encode/decode images:
|
|
68
|
+
```js
|
|
69
|
+
const image = new NevermoreImage({
|
|
70
|
+
url:'<target>',
|
|
71
|
+
maskDir: '<texture_dir>'
|
|
72
|
+
});
|
|
73
|
+
await image.ready;
|
|
74
|
+
const canvas = image.encode();
|
|
75
|
+
await Canvas.save('./encoded.jpg', canvas);
|
|
76
|
+
const decoded = image.decode();
|
|
77
|
+
await Canvas.save('./decoded.jpg', decoded);
|
|
78
|
+
```
|
|
79
|
+
|
|
25
80
|
Command Line Usage
|
|
26
81
|
------------------
|
|
27
82
|
Install with `npm install -g ai-nevermore`
|
|
@@ -29,14 +84,19 @@ Install with `npm install -g ai-nevermore`
|
|
|
29
84
|
nevermore [command]
|
|
30
85
|
|
|
31
86
|
Commands:
|
|
32
|
-
nevermore pseudotext [input-file]
|
|
87
|
+
nevermore pseudotext [input-file] transform text to poison
|
|
88
|
+
nevermore pseudoimage [input-file] transform XOR image encoding
|
|
33
89
|
|
|
34
90
|
Options:
|
|
35
91
|
--version Show version number [boolean]
|
|
92
|
+
-K, --key key to use for decoding the image [string]
|
|
36
93
|
-U, --unified-output File to generate html + css into [string]
|
|
37
94
|
-C, --css-output File to generate css into [string]
|
|
95
|
+
-I, --image-output File to output image to [string]
|
|
38
96
|
-H, --html-output File to generate html into [string]
|
|
39
97
|
-r, --raw-output Do not wrap the ouput [boolean]
|
|
98
|
+
-E, --encode inline encoding [boolean]
|
|
99
|
+
-D, --decode inline decoding [boolean]
|
|
40
100
|
-m, --render-mode output mode
|
|
41
101
|
[string] [choices: "fixed-mode", "inline-mode"] [default: "inline-mode"]
|
|
42
102
|
-s, --size The size of the font in pixels (required for
|
|
@@ -58,6 +118,8 @@ Roadmap
|
|
|
58
118
|
- [x] raw output mode
|
|
59
119
|
- [x] stdin, stdout support
|
|
60
120
|
- [x] custom dictionary
|
|
121
|
+
- [x] image encoding
|
|
122
|
+
- [ ] web component decoder
|
|
61
123
|
- [ ] self randomizing dictionary
|
|
62
124
|
- [ ] add a replacement mode (opposed to a tokenizer based solution)
|
|
63
125
|
|
package/bin/nevermore
CHANGED
|
@@ -2,9 +2,12 @@
|
|
|
2
2
|
import yargs from 'yargs';
|
|
3
3
|
import { hideBin } from 'yargs/helpers';
|
|
4
4
|
import { computeIndexKeys, generateHTMLAndCSS } from '../src/index.mjs';
|
|
5
|
+
import { NevermoreImage } from '../src/image.mjs';
|
|
6
|
+
import { Canvas } from '@environment-safe/canvas';
|
|
5
7
|
import { readFile, writeFile } from 'node:fs/promises';
|
|
6
8
|
import { join } from 'node:path';
|
|
7
9
|
const { cwd } = process;
|
|
10
|
+
const __dirname = import.meta.dirname;
|
|
8
11
|
|
|
9
12
|
|
|
10
13
|
const formatHTML = (html, css, isRaw=false)=>{
|
|
@@ -13,7 +16,7 @@ const formatHTML = (html, css, isRaw=false)=>{
|
|
|
13
16
|
};
|
|
14
17
|
|
|
15
18
|
yargs(hideBin(process.argv))
|
|
16
|
-
.command('pseudotext [input-file]', '
|
|
19
|
+
.command('pseudotext [input-file]', 'transform text to poison', (yargs) => {
|
|
17
20
|
return yargs
|
|
18
21
|
.positional('input-file', {
|
|
19
22
|
describe: 'file input'
|
|
@@ -72,6 +75,43 @@ yargs(hideBin(process.argv))
|
|
|
72
75
|
process.stdout.write(output);
|
|
73
76
|
}
|
|
74
77
|
}
|
|
78
|
+
}).command('pseudoimage [input-file]', 'transform XOR image encoding', (yargs) => {
|
|
79
|
+
return yargs
|
|
80
|
+
.positional('input-file', {
|
|
81
|
+
describe: 'file input'
|
|
82
|
+
})
|
|
83
|
+
}, async (argv) => {
|
|
84
|
+
let image = null;
|
|
85
|
+
if(!argv['input-file']){
|
|
86
|
+
//TODO: pipe support
|
|
87
|
+
throw new Error('pipe not yet supported');
|
|
88
|
+
}else{
|
|
89
|
+
const options = {
|
|
90
|
+
url: argv['input-file'],
|
|
91
|
+
maskDir: join(__dirname, '..', 'textures')
|
|
92
|
+
};
|
|
93
|
+
if(argv['key']){
|
|
94
|
+
options.key = argv['key']
|
|
95
|
+
}
|
|
96
|
+
image = new NevermoreImage(options);
|
|
97
|
+
await image.ready;
|
|
98
|
+
}
|
|
99
|
+
if(image && argv['image-output']){
|
|
100
|
+
let canvas = null;
|
|
101
|
+
if(argv['encode']){
|
|
102
|
+
canvas = await image.encode();
|
|
103
|
+
}
|
|
104
|
+
if(argv['decode']){
|
|
105
|
+
canvas = await image.decode();
|
|
106
|
+
}
|
|
107
|
+
Canvas.save(argv['image-output'], canvas);
|
|
108
|
+
}else{
|
|
109
|
+
throw new Error('piped output not yet supported');
|
|
110
|
+
}
|
|
111
|
+
}).option('key', {
|
|
112
|
+
alias: 'K',
|
|
113
|
+
type: 'string',
|
|
114
|
+
description: 'key to use for decoding the image'
|
|
75
115
|
}).option('unified-output', {
|
|
76
116
|
alias: 'U',
|
|
77
117
|
type: 'string',
|
|
@@ -80,6 +120,10 @@ yargs(hideBin(process.argv))
|
|
|
80
120
|
alias: 'C',
|
|
81
121
|
type: 'string',
|
|
82
122
|
description: 'File to generate css into'
|
|
123
|
+
}).option('image-output', {
|
|
124
|
+
alias: 'I',
|
|
125
|
+
type: 'string',
|
|
126
|
+
description: 'File to output image to'
|
|
83
127
|
}).option('html-output', {
|
|
84
128
|
alias: 'H',
|
|
85
129
|
type: 'string',
|
|
@@ -88,6 +132,14 @@ yargs(hideBin(process.argv))
|
|
|
88
132
|
alias: 'r',
|
|
89
133
|
type: 'boolean',
|
|
90
134
|
description: 'Do not wrap the ouput'
|
|
135
|
+
}).option('encode', {
|
|
136
|
+
alias: 'E',
|
|
137
|
+
type: 'boolean',
|
|
138
|
+
description: 'inline encoding'
|
|
139
|
+
}).option('decode', {
|
|
140
|
+
alias: 'D',
|
|
141
|
+
type: 'boolean',
|
|
142
|
+
description: 'inline decoding'
|
|
91
143
|
}).option('render-mode', {
|
|
92
144
|
alias: 'm',
|
|
93
145
|
type: 'string',
|
package/decoded.jpg
ADDED
|
Binary file
|
package/demo.html
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<script type="importmap">
|
|
4
|
+
{"imports":{
|
|
5
|
+
"node:os":"/src/encoded-image-component.mjs",
|
|
6
|
+
"node:stream":"/src/encoded-image-component.mjs",
|
|
7
|
+
"fs":"/src/encoded-image-component.mjs",
|
|
8
|
+
"os":"/src/encoded-image-component.mjs",
|
|
9
|
+
"module":"/src/encoded-image-component.mjs",
|
|
10
|
+
"nevermore/encoded-image-component":"./src/encoded-image-component.mjs",
|
|
11
|
+
"@environment-safe/canvas":"./node_modules/@environment-safe/canvas/src/index.mjs",
|
|
12
|
+
"@environment-safe/file":"./node_modules/@environment-safe/file/src/index.mjs",
|
|
13
|
+
"@environment-safe/elements":"./node_modules/@environment-safe/elements/src/index.mjs",
|
|
14
|
+
"@environment-safe/runtime-context":"./node_modules/@environment-safe/runtime-context/src/index.mjs"
|
|
15
|
+
}}
|
|
16
|
+
</script>
|
|
17
|
+
<script type="module">
|
|
18
|
+
import 'nevermore/encoded-image-component';
|
|
19
|
+
</script>
|
|
20
|
+
</head>
|
|
21
|
+
<body>
|
|
22
|
+
<encoded-image src="./out.jpg" key="VFYZT-HPTRG-PGHRT"></encoded-image>
|
|
23
|
+
</body>
|
|
24
|
+
</html>
|
package/demo.mjs
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { channelXOR, NevermoreImage } from './src/image.mjs';
|
|
2
|
+
import { Canvas, Image } from '@environment-safe/canvas';
|
|
3
|
+
|
|
4
|
+
(async ()=>{
|
|
5
|
+
const image = new NevermoreImage({
|
|
6
|
+
url:'./test.jpg',
|
|
7
|
+
maskDir: './textures'
|
|
8
|
+
});
|
|
9
|
+
await image.ready;
|
|
10
|
+
const canvas = image.encode();
|
|
11
|
+
await Canvas.save('./encoded.jpg', canvas);
|
|
12
|
+
const decoded = image.decode();
|
|
13
|
+
await Canvas.save('./decoded.jpg', decoded);
|
|
14
|
+
/*
|
|
15
|
+
const canvas = await Canvas.load('./test.jpg');
|
|
16
|
+
const texture = await Canvas.load('./textures/A.jpg');
|
|
17
|
+
await Canvas.save('./t.jpg', canvas);
|
|
18
|
+
await Canvas.save('./x.jpg', texture);
|
|
19
|
+
const pixels = channelXOR(canvas, texture, 'red', 1);
|
|
20
|
+
const context = canvas.getContext('2d');
|
|
21
|
+
console.log(pixels, 0, 0, canvas.width, canvas.height)
|
|
22
|
+
context.putImageData(pixels, 0, 0, 0, 0, canvas.width, canvas.height);
|
|
23
|
+
await Canvas.save('./out.jpg', canvas);
|
|
24
|
+
const resetPixels = channelXOR(canvas, texture, 'red', -1);
|
|
25
|
+
context.putImageData(resetPixels, 0, 0, 0, 0, canvas.width, canvas.height);
|
|
26
|
+
await Canvas.save('./reset.jpg', canvas);
|
|
27
|
+
//*/
|
|
28
|
+
|
|
29
|
+
})();
|
package/out.jpg
ADDED
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ai-nevermore",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.7",
|
|
4
4
|
"keywords": [
|
|
5
5
|
"adversarial",
|
|
6
6
|
"content",
|
|
@@ -18,6 +18,18 @@
|
|
|
18
18
|
".": {
|
|
19
19
|
"import": "./src/index.mjs"
|
|
20
20
|
},
|
|
21
|
+
"./image": {
|
|
22
|
+
"import": "./src/image.mjs"
|
|
23
|
+
},
|
|
24
|
+
"./encoded-image": {
|
|
25
|
+
"import": "./src/encoded-image-component.mjs"
|
|
26
|
+
},
|
|
27
|
+
"./src/encoded-image-component.mjs": {
|
|
28
|
+
"import": "./src/encoded-image-component.mjs"
|
|
29
|
+
},
|
|
30
|
+
"./src/image.mjs": {
|
|
31
|
+
"import": "./src/image.mjs"
|
|
32
|
+
},
|
|
21
33
|
"./package.json": {
|
|
22
34
|
"import": "./package.json"
|
|
23
35
|
},
|
|
@@ -25,17 +37,22 @@
|
|
|
25
37
|
"import": "./src/index.mjs"
|
|
26
38
|
}
|
|
27
39
|
},
|
|
28
|
-
"bin":{
|
|
40
|
+
"bin": {
|
|
29
41
|
"nevermore": "./bin/nevermore"
|
|
30
42
|
},
|
|
31
|
-
"scripts":{
|
|
43
|
+
"scripts": {
|
|
32
44
|
"single-file-demo": "./bin/nevermore pseudotext -U output.html nevermore.txt",
|
|
33
45
|
"pipe-demo": "cat nevermore.txt | ./bin/nevermore pseudotext",
|
|
34
46
|
"demo": "./bin/nevermore pseudotext -H out.html -C out.css nevermore.txt",
|
|
47
|
+
"web-decode-demo": "open http://localhost:8083/; npx http-server --cors --port 8083",
|
|
48
|
+
"image-encode": "./bin/nevermore pseudoimage ./test.jpg --image-output out.jpg --encode",
|
|
49
|
+
"image-decode": "./bin/nevermore pseudoimage ./out.jpg --image-output decoded.jpg --decode",
|
|
35
50
|
"help": "./bin/nevermore --help"
|
|
36
51
|
},
|
|
37
52
|
"dependencies": {
|
|
38
|
-
"@environment-safe/
|
|
53
|
+
"@environment-safe/canvas": "^4.2.3",
|
|
54
|
+
"@environment-safe/elements": "^0.0.4",
|
|
55
|
+
"@environment-safe/file": "^0.4.3",
|
|
39
56
|
"object-hash": "^3.0.0",
|
|
40
57
|
"parse-english": "^7.0.0",
|
|
41
58
|
"self-dict": "^1.0.0",
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { HTMLElement, customElements } from '@environment-safe/elements';
|
|
2
|
+
import { Canvas } from '@environment-safe/canvas';
|
|
3
|
+
import { NevermoreImage } from './image.mjs';
|
|
4
|
+
|
|
5
|
+
let textureFuture = null;
|
|
6
|
+
|
|
7
|
+
const loadImage = async (url)=>{
|
|
8
|
+
return new Promise(r => {
|
|
9
|
+
let i = new Image();
|
|
10
|
+
i.onload = (() => r(i));
|
|
11
|
+
i.src = url;
|
|
12
|
+
});
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export class EncodedImage extends HTMLElement {
|
|
16
|
+
constructor() {
|
|
17
|
+
super();
|
|
18
|
+
if(!textureFuture){
|
|
19
|
+
const urlRoot = this.getAttribute('textures') || './textures';
|
|
20
|
+
const type = this.getAttribute('type') || 'jpg';
|
|
21
|
+
textureFuture = new Promise(async (resolve)=>{
|
|
22
|
+
const list = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
|
|
23
|
+
resolve(await Promise.all(list.map((id)=>{
|
|
24
|
+
return Canvas.load(`${urlRoot}/${id}.${type}`)
|
|
25
|
+
})));
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
this.attachShadow({mode: "open"});
|
|
29
|
+
const url = this.getAttribute('src');
|
|
30
|
+
const key = this.getAttribute('key');
|
|
31
|
+
this.shadowRoot.innerHTML = `<canvas></canvas>`;
|
|
32
|
+
(async ()=>{
|
|
33
|
+
const canvas = this.shadowRoot.querySelector('canvas');
|
|
34
|
+
const image = await loadImage(url);
|
|
35
|
+
canvas.width = image.width;
|
|
36
|
+
canvas.height = image.height;
|
|
37
|
+
const context = canvas.getContext('2d');
|
|
38
|
+
context.drawImage(image, 0, 0);
|
|
39
|
+
console.log('.')
|
|
40
|
+
const masks = await textureFuture;
|
|
41
|
+
const dictionary = {};
|
|
42
|
+
masks.forEach((mask, index)=>{
|
|
43
|
+
dictionary[(index + 10).toString(36).toUpperCase()] = mask;
|
|
44
|
+
//console.log( (index + 10).toString(36).toUpperCase() );
|
|
45
|
+
});
|
|
46
|
+
console.log('>>>', { url, masks, key })
|
|
47
|
+
this.image = new NevermoreImage({ url, masks, key, dictionary });
|
|
48
|
+
await this.image.ready;
|
|
49
|
+
this.image.decode();
|
|
50
|
+
context.drawImage(this.image.canvas, 0, 0);
|
|
51
|
+
})();
|
|
52
|
+
}
|
|
53
|
+
// Element functionality written in here
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
customElements.define("encoded-image", EncodedImage);
|
package/src/image.mjs
ADDED
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
import { Canvas, Image } from '@environment-safe/canvas';
|
|
2
|
+
import { File, Path } from '@environment-safe/file';
|
|
3
|
+
|
|
4
|
+
export const channelXOR = (imageCanvas, textureCanvas, chn='', direction= 1)=>{
|
|
5
|
+
const imageContext = imageCanvas.getContext('2d', { willReadFrequently: true });
|
|
6
|
+
const textureContext = textureCanvas.getContext('2d', { willReadFrequently: true });
|
|
7
|
+
const texturePixels = textureContext.getImageData(0,0, textureCanvas.width, textureCanvas.height);
|
|
8
|
+
const newPixels = imageContext.getImageData(0,0, imageCanvas.width, imageCanvas.height);
|
|
9
|
+
const sx = imageCanvas.width; //getx
|
|
10
|
+
const sy = imageCanvas.height; //gety
|
|
11
|
+
const tx = textureCanvas.width; //getx
|
|
12
|
+
const ty = textureCanvas.height; //gety
|
|
13
|
+
let x = null;
|
|
14
|
+
let y = null;
|
|
15
|
+
let pxl = null;
|
|
16
|
+
let tex_r, tex_g, tex_b, mask_offset, pixel_offset, value = null;
|
|
17
|
+
let channel = '';
|
|
18
|
+
switch(chn.toLowerCase()){
|
|
19
|
+
case 'red':
|
|
20
|
+
case 'r':
|
|
21
|
+
channel = 'r';
|
|
22
|
+
break;
|
|
23
|
+
case 'green':
|
|
24
|
+
case 'g':
|
|
25
|
+
channel = 'g';
|
|
26
|
+
break;
|
|
27
|
+
case 'blue':
|
|
28
|
+
case 'b':
|
|
29
|
+
channel = 'b';
|
|
30
|
+
break;
|
|
31
|
+
}
|
|
32
|
+
//kernel_size = filter.length; //coming soon
|
|
33
|
+
const intervalWidth = 256;
|
|
34
|
+
for(y = 0; y < sy; y++){
|
|
35
|
+
for(x = 0; x < sx; x++){
|
|
36
|
+
mask_offset = (((y%ty)*((sx%tx)*4)) + ((x%tx)*4));
|
|
37
|
+
pixel_offset = ((y*(sx*4)) + (x*4));
|
|
38
|
+
tex_r = texturePixels.data[mask_offset ];
|
|
39
|
+
tex_g = texturePixels.data[mask_offset + 1];
|
|
40
|
+
tex_b = texturePixels.data[mask_offset + 2];
|
|
41
|
+
if(!(tex_r === tex_g && tex_g === tex_b)){
|
|
42
|
+
value = Math.floor((tex_r + tex_g + tex_b) / 3);
|
|
43
|
+
}else{
|
|
44
|
+
value = tex_r;
|
|
45
|
+
}
|
|
46
|
+
if(channel === 'r'){
|
|
47
|
+
newPixels.data[pixel_offset ] = (
|
|
48
|
+
newPixels.data[pixel_offset ] + direction*value + intervalWidth
|
|
49
|
+
)%intervalWidth;
|
|
50
|
+
}
|
|
51
|
+
if(channel === 'g'){
|
|
52
|
+
newPixels.data[pixel_offset+1] = (
|
|
53
|
+
newPixels.data[pixel_offset+1] + direction*value + intervalWidth
|
|
54
|
+
)%intervalWidth;
|
|
55
|
+
}
|
|
56
|
+
if(channel === 'b'){
|
|
57
|
+
newPixels.data[pixel_offset + 2] = (
|
|
58
|
+
newPixels.data[pixel_offset+2] + direction*value + intervalWidth
|
|
59
|
+
)%intervalWidth;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
return newPixels;
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
const makeKey = (len, alpha)=>{
|
|
67
|
+
const alphabet = alpha || 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
|
|
68
|
+
let key = '';
|
|
69
|
+
for(let lcv=0; lcv < len; lcv++){
|
|
70
|
+
key += alphabet[Math.floor(Math.random()*alphabet.length)];
|
|
71
|
+
}
|
|
72
|
+
return key;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
export class NevermoreImage{
|
|
76
|
+
constructor(options={}){
|
|
77
|
+
if(!(
|
|
78
|
+
options.masks || options.maskDir
|
|
79
|
+
)) throw new Error('a set of masks are required');
|
|
80
|
+
this.textureDictionary = options.dictionary;
|
|
81
|
+
this.ready = new Promise(async (resolve, reject)=>{
|
|
82
|
+
// load all masks
|
|
83
|
+
// TODO: load from cache
|
|
84
|
+
let masks = options.masks;
|
|
85
|
+
const textureWork = [];
|
|
86
|
+
const textureDictionary = {};
|
|
87
|
+
if(options.maskDir){
|
|
88
|
+
const types = ['jpg', 'jpeg', 'gif', 'png'];
|
|
89
|
+
const files = (await File.list(options.maskDir)).filter((name)=>{
|
|
90
|
+
const parts = name.split('.');
|
|
91
|
+
const ext = parts.pop().toLowerCase();
|
|
92
|
+
return types.indexOf(ext) !== -1;
|
|
93
|
+
// TODO: support mime through magic numbers
|
|
94
|
+
});
|
|
95
|
+
const fileLoads = [];
|
|
96
|
+
for(let lcv=0; lcv<files.length; lcv++){
|
|
97
|
+
const pth = new Path(files[lcv]);
|
|
98
|
+
if(!pth.parsed) throw new Error('path not parsed');
|
|
99
|
+
const parsed = pth.parsed.posix || pth.parsed.win32;
|
|
100
|
+
const canvasLoad = Canvas.load(
|
|
101
|
+
Path.join(options.maskDir, files[lcv])
|
|
102
|
+
);
|
|
103
|
+
textureWork.push(new Promise(async (resolve)=>{
|
|
104
|
+
resolve({
|
|
105
|
+
name: parsed.name,
|
|
106
|
+
canvas: await canvasLoad
|
|
107
|
+
});
|
|
108
|
+
}))
|
|
109
|
+
fileLoads.push(Canvas.load(Path.join(options.maskDir, files[lcv])));
|
|
110
|
+
}
|
|
111
|
+
masks = await Promise.all(fileLoads);
|
|
112
|
+
const texturesLoaded = await Promise.all(textureWork);
|
|
113
|
+
for(let lcv=0; lcv<texturesLoaded.length; lcv++){
|
|
114
|
+
textureDictionary[
|
|
115
|
+
texturesLoaded[lcv].name
|
|
116
|
+
] = texturesLoaded[lcv].canvas;
|
|
117
|
+
};
|
|
118
|
+
this.textureDictionary = textureDictionary;
|
|
119
|
+
}
|
|
120
|
+
this.masks = masks;
|
|
121
|
+
this.canvas = options.image;
|
|
122
|
+
// masks loaded, now load the base image
|
|
123
|
+
if(options.url){
|
|
124
|
+
this.canvas = await Canvas.load(options.url);
|
|
125
|
+
}
|
|
126
|
+
if(!this.canvas){
|
|
127
|
+
return reject(new Error(
|
|
128
|
+
'no base image provided to Image File'
|
|
129
|
+
));
|
|
130
|
+
}
|
|
131
|
+
//make an id
|
|
132
|
+
this.key = options.key || `${makeKey(5)}-${makeKey(5)}-${makeKey(5)}`;
|
|
133
|
+
console.log('KEY:', this.key);
|
|
134
|
+
//we're ready to do work
|
|
135
|
+
resolve();
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
transform(options={}){
|
|
140
|
+
const { channelKeys, direction, key } = options;
|
|
141
|
+
let pixels = null;
|
|
142
|
+
let channelKey = null;
|
|
143
|
+
const canvas = this.canvas;
|
|
144
|
+
for(let lcv=0; lcv < channelKeys.r.length; lcv++){
|
|
145
|
+
const texture = this.textureDictionary[channelKeys.r[lcv]];
|
|
146
|
+
const pixels = channelXOR(canvas, texture, 'red', direction);
|
|
147
|
+
const context = canvas.getContext('2d');
|
|
148
|
+
context.putImageData(pixels, 0, 0, 0, 0, canvas.width, canvas.height);
|
|
149
|
+
}
|
|
150
|
+
for(let lcv=0; lcv < channelKeys.r.length; lcv++){
|
|
151
|
+
const texture = this.textureDictionary[channelKeys.r[lcv]];
|
|
152
|
+
const pixels = channelXOR(canvas, texture, 'green', direction);
|
|
153
|
+
const context = canvas.getContext('2d');
|
|
154
|
+
context.putImageData(pixels, 0, 0, 0, 0, canvas.width, canvas.height);
|
|
155
|
+
}
|
|
156
|
+
for(let lcv=0; lcv < channelKeys.r.length; lcv++){
|
|
157
|
+
const texture = this.textureDictionary[channelKeys.r[lcv]];
|
|
158
|
+
const pixels = channelXOR(canvas, texture, 'blue', direction);
|
|
159
|
+
const context = canvas.getContext('2d');
|
|
160
|
+
context.putImageData(pixels, 0, 0, 0, 0, canvas.width, canvas.height);
|
|
161
|
+
}
|
|
162
|
+
// should this mutate? current answer: yes
|
|
163
|
+
return canvas;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
encode(options={}){
|
|
167
|
+
const key = options.key || this.key;
|
|
168
|
+
const parts = key.split('-')
|
|
169
|
+
const channelKeys = {
|
|
170
|
+
r: parts[0].split(''),
|
|
171
|
+
g: parts[1].split(''),
|
|
172
|
+
b: parts[2].split('')
|
|
173
|
+
}
|
|
174
|
+
return this.transform({ channelKeys, key, direction: 1 });
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
decode(options={}){
|
|
178
|
+
const key = options.key || this.key;
|
|
179
|
+
const parts = key.split('-');
|
|
180
|
+
const channelKeys = {
|
|
181
|
+
r: parts[0].split('').reverse(),
|
|
182
|
+
g: parts[1].split('').reverse(),
|
|
183
|
+
b: parts[2].split('').reverse()
|
|
184
|
+
}
|
|
185
|
+
return this.transform({ channelKeys, key, direction: -1 });
|
|
186
|
+
}
|
|
187
|
+
}
|
package/test.jpg
ADDED
|
Binary file
|
package/textures/A.jpg
ADDED
|
Binary file
|
package/textures/B.jpg
ADDED
|
Binary file
|
package/textures/C.jpg
ADDED
|
Binary file
|
package/textures/D.jpg
ADDED
|
Binary file
|
package/textures/E.jpg
ADDED
|
Binary file
|
package/textures/F.jpg
ADDED
|
Binary file
|
package/textures/G.jpg
ADDED
|
Binary file
|
package/textures/H.jpg
ADDED
|
Binary file
|
package/textures/I.jpg
ADDED
|
Binary file
|
package/textures/J.jpg
ADDED
|
Binary file
|
package/textures/K.jpg
ADDED
|
Binary file
|
package/textures/L.jpg
ADDED
|
Binary file
|
package/textures/M.jpg
ADDED
|
Binary file
|
package/textures/N.jpg
ADDED
|
Binary file
|
package/textures/O.jpg
ADDED
|
Binary file
|
package/textures/P.jpg
ADDED
|
Binary file
|
package/textures/Q.jpg
ADDED
|
Binary file
|
package/textures/R.jpg
ADDED
|
Binary file
|
package/textures/S.jpg
ADDED
|
Binary file
|
package/textures/T.jpg
ADDED
|
Binary file
|
package/textures/U.jpg
ADDED
|
Binary file
|
package/textures/V.jpg
ADDED
|
Binary file
|
package/textures/W.jpg
ADDED
|
Binary file
|
package/textures/X.jpg
ADDED
|
Binary file
|
package/textures/Y.jpg
ADDED
|
Binary file
|
package/textures/Z.jpg
ADDED
|
Binary file
|