├── .gitignore
├── .prettierrc
├── .stackblitzrc
├── README.md
├── favicon.ico
├── image.jpeg
├── index.html
├── modal.html
├── overlay.html
├── package-lock.json
├── package.json
├── sticker-one.svg
├── sticker-three.svg
├── sticker-two.svg
└── styles.css


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | .env


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |     "trailingComma": "es5",
3 |     "tabWidth": 4,
4 |     "printWidth": 80,
5 |     "singleQuote": true,
6 |     "semi": true
7 | }
8 | 


--------------------------------------------------------------------------------
/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 |     "startCommand": "npm install @pqina/pintura@8.x && npm start"
3 | }
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # JavaScript Image Editor with Pintura example project
 2 | 
 3 | ## Demo
 4 | 
 5 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/pqina/pintura-example-javascript?file=index.html)
 6 | 
 7 | ## Installation
 8 | 
 9 | ### NodeJS
10 | 
11 | If it's not already installed we need to install [Node.js](https://nodejs.org)
12 | 
13 | Then we [install the project dependencies](https://nodejs.dev/en/learn/an-introduction-to-the-npm-package-manager/#introduction-to-npm) by running `npm install` in a terminal window. This will install `@pqina/pintura` and a local node server.
14 | 
15 | Run `npm start` to start a local test server at [http://localhost:8080](http://localhost:8080)
16 | 
17 | ### Manually
18 | 
19 | 1. Download the [Pintura package](https://pqina.nl/pintura/guide/#zip-panel).
20 | 2. We only need the `pintura.css` stylesheet and the `pintura.js` JavaScript file.
21 | 3. Update the url after the `import` statement so it points to the downloaded JavaScript file.
22 | 4. Update the stylesheet tag so it links to the downloaded Pintura stylesheet file.
23 | 
24 | ## Questions
25 | 
26 | Feel free to reach out using the [contact form](https://pqina.nl/pintura/contact/) on the Pintura product page.
27 | 
28 | # Other example projects
29 | 
30 | JavaScript:
31 | 
32 | -   [JavaScript](https://github.com/pqina/pintura-example-javascript)
33 | -   [PinturaInput](https://github.com/pqina/pintura-example-pintura-input)
34 | -   [CustomElement](https://github.com/pqina/pintura-example-custom-element)
35 | 
36 | Frameworks:
37 | 
38 | -   [jQuery](https://github.com/pqina/pintura-example-jquery)
39 | -   [Alpine](https://github.com/pqina/pintura-example-alpine)
40 | -   [Angular](https://github.com/pqina/pintura-example-angular)
41 | -   [Vue 2](https://github.com/pqina/pintura-example-vue-2)
42 | -   [Vue 3](https://github.com/pqina/pintura-example-vue-3)
43 | -   [Nuxt 2](https://github.com/pqina/pintura-example-nuxt-2)
44 | -   [Nuxt 3](https://github.com/pqina/pintura-example-nuxt-3)
45 | -   [Svelte](https://github.com/pqina/pintura-example-svelte)
46 | -   [SvelteKit](https://github.com/pqina/pintura-example-sveltekit)
47 | -   [React](https://github.com/pqina/pintura-example-react)
48 | -   [React TypeScript](https://github.com/pqina/pintura-example-react-typescript)
49 | -   [NextJS](https://github.com/pqina/pintura-example-nextjs)
50 | -   [React Native](https://github.com/pqina/pintura-example-react-native)
51 | -   [React Native TypeScript](https://github.com/pqina/pintura-example-react-native-typescript)
52 | -   [Cordova](https://github.com/pqina/pintura-example-cordova)
53 | -   [Capacitor](https://github.com/pqina/pintura-example-capacitor)
54 | -   [Ionic 6](https://github.com/pqina/pintura-example-ionic-6)
55 | 
56 | File upload libraries:
57 | 
58 | -   [FilePond](https://github.com/pqina/pintura-example-filepond)
59 | -   [jQuery File Upload](https://github.com/pqina/pintura-example-jquery-file-upload)
60 | -   [React Dropzone](https://github.com/pqina/pintura-example-react-dropzone)
61 | -   [Dropzone](https://github.com/pqina/pintura-example-dropzone)
62 | -   [Uppy](https://github.com/pqina/pintura-example-uppy)
63 | 
64 | ## License
65 | 
66 | This projects uses a test version of Pintura. This version of Pintura will show a watermark in the editor and on generated images.
67 | 
68 | Purchase a license at https://pqina.nl/pintura to use Pintura in production.
69 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pqina/pintura-example-javascript/2ed3ed02567d32f0e2cb409fcde5925ba91a7073/favicon.ico


--------------------------------------------------------------------------------
/image.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pqina/pintura-example-javascript/2ed3ed02567d32f0e2cb409fcde5925ba91a7073/image.jpeg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>Pintura JavaScript example project</title>
 7 |         <link
 8 |             rel="stylesheet"
 9 |             href="./node_modules/@pqina/pintura/pintura.css"
10 |         />
11 |         <link rel="stylesheet" href="./styles.css" />
12 |     </head>
13 |     <body>
14 |         <h1>Pintura Image Editor</h1>
15 | 
16 |         <ul>
17 |             <li><a href="/index.html">Append</a></li>
18 |             <li><a href="/modal.html">Modal</a></li>
19 |             <li><a href="/overlay.html">Overlay</a></li>
20 |         </ul>
21 | 
22 |         <div class="inline-editor" style="width: 90vw; height: 600px"></div>
23 |         <p><img class="inline-result" src="" alt="" /></p>
24 | 
25 |         <script type="module">
26 |             import { appendDefaultEditor } from './node_modules/@pqina/pintura/pintura.js';
27 | 
28 |             const editor = appendDefaultEditor('.inline-editor', {
29 |                 src: './image.jpeg',
30 |                 stickers: [
31 |                     ['Emoji', ['⭐️', '😊', '👍', '👎', '☀️', '🌤', '🌥']],
32 |                     [
33 |                         'Markers',
34 |                         [
35 |                             {
36 |                                 src: 'sticker-one.svg',
37 |                                 width: '5%',
38 |                                 alt: 'One',
39 |                             },
40 |                             {
41 |                                 src: 'sticker-two.svg',
42 |                                 width: '5%',
43 |                                 alt: 'Two',
44 |                             },
45 |                             {
46 |                                 src: 'sticker-three.svg',
47 |                                 width: '5%',
48 |                                 alt: 'Three',
49 |                             },
50 |                         ],
51 |                     ],
52 |                 ],
53 |             });
54 | 
55 |             editor.on('load', (res) => console.log('inline result', res));
56 | 
57 |             editor.on('process', (res) =>
58 |                 document
59 |                     .querySelector('.inline-result')
60 |                     .setAttribute('src', URL.createObjectURL(res.dest))
61 |             );
62 |         </script>
63 |     </body>
64 | </html>
65 | 


--------------------------------------------------------------------------------
/modal.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>Pintura JavaScript example project</title>
 7 |         <link
 8 |             rel="stylesheet"
 9 |             href="./node_modules/@pqina/pintura/pintura.css"
10 |         />
11 |         <link rel="stylesheet" href="./styles.css" />
12 |     </head>
13 |     <body>
14 |         <h1>Pintura Image Editor</h1>
15 | 
16 |         <ul>
17 |             <li><a href="/index.html">Append</a></li>
18 |             <li><a href="/modal.html">Modal</a></li>
19 |             <li><a href="/overlay.html">Overlay</a></li>
20 |         </ul>
21 | 
22 |         <h2>Modal</h2>
23 |         <p><button class="modal-button">Open editor</button></p>
24 |         <p><img class="modal-result" src="" alt="" /></p>
25 | 
26 |         <script type="module">
27 |             import { openDefaultEditor } from './node_modules/@pqina/pintura/pintura.js';
28 | 
29 |             // modal
30 |             document
31 |                 .querySelector('.modal-button')
32 |                 .addEventListener('click', () => {
33 |                     const editor = openDefaultEditor({
34 |                         src: './image.jpeg',
35 |                         stickers: [
36 |                             [
37 |                                 'Emoji',
38 |                                 ['⭐️', '😊', '👍', '👎', '☀️', '🌤', '🌥'],
39 |                             ],
40 |                             [
41 |                                 'Markers',
42 |                                 [
43 |                                     {
44 |                                         src: 'sticker-one.svg',
45 |                                         width: '5%',
46 |                                         alt: 'One',
47 |                                     },
48 |                                     {
49 |                                         src: 'sticker-two.svg',
50 |                                         width: '5%',
51 |                                         alt: 'Two',
52 |                                     },
53 |                                     {
54 |                                         src: 'sticker-three.svg',
55 |                                         width: '5%',
56 |                                         alt: 'Three',
57 |                                     },
58 |                                 ],
59 |                             ],
60 |                         ],
61 |                     });
62 | 
63 |                     editor.on('load', (res) =>
64 |                         console.log('modal result', res)
65 |                     );
66 | 
67 |                     editor.on('process', (res) =>
68 |                         document
69 |                             .querySelector('.modal-result')
70 |                             .setAttribute('src', URL.createObjectURL(res.dest))
71 |                     );
72 |                 });
73 |         </script>
74 |     </body>
75 | </html>
76 | 


--------------------------------------------------------------------------------
/overlay.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |     <head>
  4 |         <meta charset="UTF-8" />
  5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |         <title>Pintura JavaScript example project</title>
  7 |         <link
  8 |             rel="stylesheet"
  9 |             href="./node_modules/@pqina/pintura/pintura.css"
 10 |         />
 11 |         <link rel="stylesheet" href="./styles.css" />
 12 |     </head>
 13 |     <body>
 14 |         <h1>Pintura Image Editor</h1>
 15 | 
 16 |         <ul>
 17 |             <li><a href="/index.html">Append</a></li>
 18 |             <li><a href="/modal.html">Modal</a></li>
 19 |             <li><a href="/overlay.html">Overlay</a></li>
 20 |         </ul>
 21 | 
 22 |         <p>
 23 |             <button class="overlay-button" data-action="open">
 24 |                 Open editor
 25 |             </button>
 26 |         </p>
 27 |         <p>
 28 |             <button
 29 |                 class="overlay-button"
 30 |                 data-action="close"
 31 |                 style="display: none"
 32 |             >
 33 |                 Close editor
 34 |             </button>
 35 |         </p>
 36 |         <p>
 37 |             <img class="overlay-result" width="512" src="image.jpeg" alt="" />
 38 |         </p>
 39 |         <div
 40 |             class="overlay-editor"
 41 |             style="display: none; width: 512px; height: 256px"
 42 |         ></div>
 43 | 
 44 |         <script type="module">
 45 |             import { overlayDefaultEditor } from './node_modules/@pqina/pintura/pintura.js';
 46 | 
 47 |             let editor;
 48 |             let imageState;
 49 | 
 50 |             document
 51 |                 .querySelector('.overlay-button[data-action="open"]')
 52 |                 .addEventListener('click', () => {
 53 |                     // hide result and show the editor
 54 |                     document.querySelector('.overlay-result').style.display =
 55 |                         'none';
 56 |                     document.querySelector('.overlay-editor').style.display =
 57 |                         '';
 58 |                     document.querySelector(
 59 |                         '.overlay-button[data-action=open]'
 60 |                     ).style.display = 'none';
 61 |                     document.querySelector(
 62 |                         '.overlay-button[data-action=close]'
 63 |                     ).style.display = '';
 64 | 
 65 |                     // append overlay editor
 66 |                     editor = overlayDefaultEditor('.overlay-editor', {
 67 |                         src: './image.jpeg',
 68 | 
 69 |                         // current image state
 70 |                         imageState: imageState,
 71 |                     });
 72 | 
 73 |                     editor.on('process', (res) => {
 74 |                         // new image state, so we can re-edit with previous state
 75 |                         imageState = res.imageState;
 76 | 
 77 |                         // show the edit result
 78 |                         document
 79 |                             .querySelector('.overlay-result')
 80 |                             .setAttribute('src', URL.createObjectURL(res.dest));
 81 |                         document.querySelector(
 82 |                             '.overlay-result'
 83 |                         ).style.display = '';
 84 | 
 85 |                         // remove the editor
 86 |                         editor.destroy();
 87 |                         editor = undefined;
 88 |                         document.querySelector(
 89 |                             '.overlay-editor'
 90 |                         ).style.display = 'none';
 91 | 
 92 |                         document.querySelector(
 93 |                             '.overlay-button[data-action=open]'
 94 |                         ).style.display = '';
 95 |                         document.querySelector(
 96 |                             '.overlay-button[data-action=close]'
 97 |                         ).style.display = 'none';
 98 |                     });
 99 |                 });
100 | 
101 |             document
102 |                 .querySelector('.overlay-button[data-action="close"]')
103 |                 .addEventListener('click', () => {
104 |                     // remove the editor if it's been defined
105 |                     if (!editor) return;
106 | 
107 |                     editor.destroy();
108 |                     editor = undefined;
109 | 
110 |                     // hide the editor and show the result
111 |                     document.querySelector('.overlay-result').style.display =
112 |                         '';
113 | 
114 |                     document.querySelector('.overlay-editor').style.display =
115 |                         'none';
116 | 
117 |                     document.querySelector(
118 |                         '.overlay-button[data-action=open]'
119 |                     ).style.display = '';
120 | 
121 |                     document.querySelector(
122 |                         '.overlay-button[data-action=close]'
123 |                     ).style.display = 'none';
124 |                 });
125 |         </script>
126 |     </body>
127 | </html>
128 | 


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |     "name": "pintura-example-javascript",
  3 |     "version": "0.0.0",
  4 |     "lockfileVersion": 2,
  5 |     "requires": true,
  6 |     "packages": {
  7 |         "": {
  8 |             "name": "pintura-example-javascript",
  9 |             "version": "0.0.0",
 10 |             "hasInstallScript": true,
 11 |             "license": "https://pqina.nl/pintura/license/",
 12 |             "dependencies": {
 13 |                 "@pqina/pintura": "^8.60.15"
 14 |             },
 15 |             "devDependencies": {
 16 |                 "http-server": "^14.1.1"
 17 |             }
 18 |         },
 19 |         "node_modules/@pqina/pintura": {
 20 |             "version": "8.60.15",
 21 |             "resolved": "https://registry.npmjs.org/@pqina/pintura/-/pintura-8.60.15.tgz",
 22 |             "integrity": "sha512-0fEp+uuT0q8g3ljA7vQMmTe971fScvI/ajVaoMYa/V9BCNOIl4ALMh4n003Y9B0VBEZBdqG+qi9VwC8xGmI3zg=="
 23 |         },
 24 |         "node_modules/ansi-styles": {
 25 |             "version": "4.3.0",
 26 |             "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
 27 |             "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
 28 |             "dev": true,
 29 |             "dependencies": {
 30 |                 "color-convert": "^2.0.1"
 31 |             },
 32 |             "engines": {
 33 |                 "node": ">=8"
 34 |             },
 35 |             "funding": {
 36 |                 "url": "https://github.com/chalk/ansi-styles?sponsor=1"
 37 |             }
 38 |         },
 39 |         "node_modules/async": {
 40 |             "version": "2.6.4",
 41 |             "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
 42 |             "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
 43 |             "dev": true,
 44 |             "dependencies": {
 45 |                 "lodash": "^4.17.14"
 46 |             }
 47 |         },
 48 |         "node_modules/basic-auth": {
 49 |             "version": "2.0.1",
 50 |             "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
 51 |             "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
 52 |             "dev": true,
 53 |             "dependencies": {
 54 |                 "safe-buffer": "5.1.2"
 55 |             },
 56 |             "engines": {
 57 |                 "node": ">= 0.8"
 58 |             }
 59 |         },
 60 |         "node_modules/call-bind": {
 61 |             "version": "1.0.2",
 62 |             "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
 63 |             "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
 64 |             "dev": true,
 65 |             "dependencies": {
 66 |                 "function-bind": "^1.1.1",
 67 |                 "get-intrinsic": "^1.0.2"
 68 |             },
 69 |             "funding": {
 70 |                 "url": "https://github.com/sponsors/ljharb"
 71 |             }
 72 |         },
 73 |         "node_modules/chalk": {
 74 |             "version": "4.1.2",
 75 |             "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
 76 |             "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
 77 |             "dev": true,
 78 |             "dependencies": {
 79 |                 "ansi-styles": "^4.1.0",
 80 |                 "supports-color": "^7.1.0"
 81 |             },
 82 |             "engines": {
 83 |                 "node": ">=10"
 84 |             },
 85 |             "funding": {
 86 |                 "url": "https://github.com/chalk/chalk?sponsor=1"
 87 |             }
 88 |         },
 89 |         "node_modules/color-convert": {
 90 |             "version": "2.0.1",
 91 |             "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
 92 |             "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
 93 |             "dev": true,
 94 |             "dependencies": {
 95 |                 "color-name": "~1.1.4"
 96 |             },
 97 |             "engines": {
 98 |                 "node": ">=7.0.0"
 99 |             }
100 |         },
101 |         "node_modules/color-name": {
102 |             "version": "1.1.4",
103 |             "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
104 |             "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
105 |             "dev": true
106 |         },
107 |         "node_modules/corser": {
108 |             "version": "2.0.1",
109 |             "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
110 |             "integrity": "sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==",
111 |             "dev": true,
112 |             "engines": {
113 |                 "node": ">= 0.4.0"
114 |             }
115 |         },
116 |         "node_modules/debug": {
117 |             "version": "3.2.7",
118 |             "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
119 |             "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
120 |             "dev": true,
121 |             "dependencies": {
122 |                 "ms": "^2.1.1"
123 |             }
124 |         },
125 |         "node_modules/eventemitter3": {
126 |             "version": "4.0.7",
127 |             "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
128 |             "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
129 |             "dev": true
130 |         },
131 |         "node_modules/follow-redirects": {
132 |             "version": "1.15.2",
133 |             "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
134 |             "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
135 |             "dev": true,
136 |             "funding": [
137 |                 {
138 |                     "type": "individual",
139 |                     "url": "https://github.com/sponsors/RubenVerborgh"
140 |                 }
141 |             ],
142 |             "engines": {
143 |                 "node": ">=4.0"
144 |             },
145 |             "peerDependenciesMeta": {
146 |                 "debug": {
147 |                     "optional": true
148 |                 }
149 |             }
150 |         },
151 |         "node_modules/function-bind": {
152 |             "version": "1.1.1",
153 |             "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
154 |             "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
155 |             "dev": true
156 |         },
157 |         "node_modules/get-intrinsic": {
158 |             "version": "1.2.0",
159 |             "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
160 |             "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
161 |             "dev": true,
162 |             "dependencies": {
163 |                 "function-bind": "^1.1.1",
164 |                 "has": "^1.0.3",
165 |                 "has-symbols": "^1.0.3"
166 |             },
167 |             "funding": {
168 |                 "url": "https://github.com/sponsors/ljharb"
169 |             }
170 |         },
171 |         "node_modules/has": {
172 |             "version": "1.0.3",
173 |             "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
174 |             "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
175 |             "dev": true,
176 |             "dependencies": {
177 |                 "function-bind": "^1.1.1"
178 |             },
179 |             "engines": {
180 |                 "node": ">= 0.4.0"
181 |             }
182 |         },
183 |         "node_modules/has-flag": {
184 |             "version": "4.0.0",
185 |             "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
186 |             "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
187 |             "dev": true,
188 |             "engines": {
189 |                 "node": ">=8"
190 |             }
191 |         },
192 |         "node_modules/has-symbols": {
193 |             "version": "1.0.3",
194 |             "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
195 |             "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
196 |             "dev": true,
197 |             "engines": {
198 |                 "node": ">= 0.4"
199 |             },
200 |             "funding": {
201 |                 "url": "https://github.com/sponsors/ljharb"
202 |             }
203 |         },
204 |         "node_modules/he": {
205 |             "version": "1.2.0",
206 |             "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
207 |             "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
208 |             "dev": true,
209 |             "bin": {
210 |                 "he": "bin/he"
211 |             }
212 |         },
213 |         "node_modules/html-encoding-sniffer": {
214 |             "version": "3.0.0",
215 |             "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
216 |             "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
217 |             "dev": true,
218 |             "dependencies": {
219 |                 "whatwg-encoding": "^2.0.0"
220 |             },
221 |             "engines": {
222 |                 "node": ">=12"
223 |             }
224 |         },
225 |         "node_modules/http-proxy": {
226 |             "version": "1.18.1",
227 |             "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
228 |             "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
229 |             "dev": true,
230 |             "dependencies": {
231 |                 "eventemitter3": "^4.0.0",
232 |                 "follow-redirects": "^1.0.0",
233 |                 "requires-port": "^1.0.0"
234 |             },
235 |             "engines": {
236 |                 "node": ">=8.0.0"
237 |             }
238 |         },
239 |         "node_modules/http-server": {
240 |             "version": "14.1.1",
241 |             "resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.1.tgz",
242 |             "integrity": "sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==",
243 |             "dev": true,
244 |             "dependencies": {
245 |                 "basic-auth": "^2.0.1",
246 |                 "chalk": "^4.1.2",
247 |                 "corser": "^2.0.1",
248 |                 "he": "^1.2.0",
249 |                 "html-encoding-sniffer": "^3.0.0",
250 |                 "http-proxy": "^1.18.1",
251 |                 "mime": "^1.6.0",
252 |                 "minimist": "^1.2.6",
253 |                 "opener": "^1.5.1",
254 |                 "portfinder": "^1.0.28",
255 |                 "secure-compare": "3.0.1",
256 |                 "union": "~0.5.0",
257 |                 "url-join": "^4.0.1"
258 |             },
259 |             "bin": {
260 |                 "http-server": "bin/http-server"
261 |             },
262 |             "engines": {
263 |                 "node": ">=12"
264 |             }
265 |         },
266 |         "node_modules/iconv-lite": {
267 |             "version": "0.6.3",
268 |             "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
269 |             "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
270 |             "dev": true,
271 |             "dependencies": {
272 |                 "safer-buffer": ">= 2.1.2 < 3.0.0"
273 |             },
274 |             "engines": {
275 |                 "node": ">=0.10.0"
276 |             }
277 |         },
278 |         "node_modules/lodash": {
279 |             "version": "4.17.21",
280 |             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
281 |             "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
282 |             "dev": true
283 |         },
284 |         "node_modules/mime": {
285 |             "version": "1.6.0",
286 |             "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
287 |             "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
288 |             "dev": true,
289 |             "bin": {
290 |                 "mime": "cli.js"
291 |             },
292 |             "engines": {
293 |                 "node": ">=4"
294 |             }
295 |         },
296 |         "node_modules/minimist": {
297 |             "version": "1.2.8",
298 |             "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
299 |             "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
300 |             "dev": true,
301 |             "funding": {
302 |                 "url": "https://github.com/sponsors/ljharb"
303 |             }
304 |         },
305 |         "node_modules/mkdirp": {
306 |             "version": "0.5.6",
307 |             "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
308 |             "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
309 |             "dev": true,
310 |             "dependencies": {
311 |                 "minimist": "^1.2.6"
312 |             },
313 |             "bin": {
314 |                 "mkdirp": "bin/cmd.js"
315 |             }
316 |         },
317 |         "node_modules/ms": {
318 |             "version": "2.1.3",
319 |             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
320 |             "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
321 |             "dev": true
322 |         },
323 |         "node_modules/object-inspect": {
324 |             "version": "1.12.3",
325 |             "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
326 |             "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
327 |             "dev": true,
328 |             "funding": {
329 |                 "url": "https://github.com/sponsors/ljharb"
330 |             }
331 |         },
332 |         "node_modules/opener": {
333 |             "version": "1.5.2",
334 |             "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
335 |             "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
336 |             "dev": true,
337 |             "bin": {
338 |                 "opener": "bin/opener-bin.js"
339 |             }
340 |         },
341 |         "node_modules/portfinder": {
342 |             "version": "1.0.32",
343 |             "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
344 |             "integrity": "sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==",
345 |             "dev": true,
346 |             "dependencies": {
347 |                 "async": "^2.6.4",
348 |                 "debug": "^3.2.7",
349 |                 "mkdirp": "^0.5.6"
350 |             },
351 |             "engines": {
352 |                 "node": ">= 0.12.0"
353 |             }
354 |         },
355 |         "node_modules/qs": {
356 |             "version": "6.11.1",
357 |             "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.1.tgz",
358 |             "integrity": "sha512-0wsrzgTz/kAVIeuxSjnpGC56rzYtr6JT/2BwEvMaPhFIoYa1aGO8LbzuU1R0uUYQkLpWBTOj0l/CLAJB64J6nQ==",
359 |             "dev": true,
360 |             "dependencies": {
361 |                 "side-channel": "^1.0.4"
362 |             },
363 |             "engines": {
364 |                 "node": ">=0.6"
365 |             },
366 |             "funding": {
367 |                 "url": "https://github.com/sponsors/ljharb"
368 |             }
369 |         },
370 |         "node_modules/requires-port": {
371 |             "version": "1.0.0",
372 |             "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
373 |             "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
374 |             "dev": true
375 |         },
376 |         "node_modules/safe-buffer": {
377 |             "version": "5.1.2",
378 |             "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
379 |             "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
380 |             "dev": true
381 |         },
382 |         "node_modules/safer-buffer": {
383 |             "version": "2.1.2",
384 |             "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
385 |             "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
386 |             "dev": true
387 |         },
388 |         "node_modules/secure-compare": {
389 |             "version": "3.0.1",
390 |             "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz",
391 |             "integrity": "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==",
392 |             "dev": true
393 |         },
394 |         "node_modules/side-channel": {
395 |             "version": "1.0.4",
396 |             "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
397 |             "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
398 |             "dev": true,
399 |             "dependencies": {
400 |                 "call-bind": "^1.0.0",
401 |                 "get-intrinsic": "^1.0.2",
402 |                 "object-inspect": "^1.9.0"
403 |             },
404 |             "funding": {
405 |                 "url": "https://github.com/sponsors/ljharb"
406 |             }
407 |         },
408 |         "node_modules/supports-color": {
409 |             "version": "7.2.0",
410 |             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
411 |             "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
412 |             "dev": true,
413 |             "dependencies": {
414 |                 "has-flag": "^4.0.0"
415 |             },
416 |             "engines": {
417 |                 "node": ">=8"
418 |             }
419 |         },
420 |         "node_modules/union": {
421 |             "version": "0.5.0",
422 |             "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",
423 |             "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==",
424 |             "dev": true,
425 |             "dependencies": {
426 |                 "qs": "^6.4.0"
427 |             },
428 |             "engines": {
429 |                 "node": ">= 0.8.0"
430 |             }
431 |         },
432 |         "node_modules/url-join": {
433 |             "version": "4.0.1",
434 |             "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
435 |             "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==",
436 |             "dev": true
437 |         },
438 |         "node_modules/whatwg-encoding": {
439 |             "version": "2.0.0",
440 |             "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
441 |             "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
442 |             "dev": true,
443 |             "dependencies": {
444 |                 "iconv-lite": "0.6.3"
445 |             },
446 |             "engines": {
447 |                 "node": ">=12"
448 |             }
449 |         }
450 |     },
451 |     "dependencies": {
452 |         "@pqina/pintura": {
453 |             "version": "8.60.15",
454 |             "resolved": "https://registry.npmjs.org/@pqina/pintura/-/pintura-8.60.15.tgz",
455 |             "integrity": "sha512-0fEp+uuT0q8g3ljA7vQMmTe971fScvI/ajVaoMYa/V9BCNOIl4ALMh4n003Y9B0VBEZBdqG+qi9VwC8xGmI3zg=="
456 |         },
457 |         "ansi-styles": {
458 |             "version": "4.3.0",
459 |             "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
460 |             "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
461 |             "dev": true,
462 |             "requires": {
463 |                 "color-convert": "^2.0.1"
464 |             }
465 |         },
466 |         "async": {
467 |             "version": "2.6.4",
468 |             "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
469 |             "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
470 |             "dev": true,
471 |             "requires": {
472 |                 "lodash": "^4.17.14"
473 |             }
474 |         },
475 |         "basic-auth": {
476 |             "version": "2.0.1",
477 |             "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
478 |             "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
479 |             "dev": true,
480 |             "requires": {
481 |                 "safe-buffer": "5.1.2"
482 |             }
483 |         },
484 |         "call-bind": {
485 |             "version": "1.0.2",
486 |             "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
487 |             "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
488 |             "dev": true,
489 |             "requires": {
490 |                 "function-bind": "^1.1.1",
491 |                 "get-intrinsic": "^1.0.2"
492 |             }
493 |         },
494 |         "chalk": {
495 |             "version": "4.1.2",
496 |             "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
497 |             "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
498 |             "dev": true,
499 |             "requires": {
500 |                 "ansi-styles": "^4.1.0",
501 |                 "supports-color": "^7.1.0"
502 |             }
503 |         },
504 |         "color-convert": {
505 |             "version": "2.0.1",
506 |             "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
507 |             "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
508 |             "dev": true,
509 |             "requires": {
510 |                 "color-name": "~1.1.4"
511 |             }
512 |         },
513 |         "color-name": {
514 |             "version": "1.1.4",
515 |             "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
516 |             "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
517 |             "dev": true
518 |         },
519 |         "corser": {
520 |             "version": "2.0.1",
521 |             "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
522 |             "integrity": "sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==",
523 |             "dev": true
524 |         },
525 |         "debug": {
526 |             "version": "3.2.7",
527 |             "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
528 |             "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
529 |             "dev": true,
530 |             "requires": {
531 |                 "ms": "^2.1.1"
532 |             }
533 |         },
534 |         "eventemitter3": {
535 |             "version": "4.0.7",
536 |             "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
537 |             "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
538 |             "dev": true
539 |         },
540 |         "follow-redirects": {
541 |             "version": "1.15.2",
542 |             "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
543 |             "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
544 |             "dev": true
545 |         },
546 |         "function-bind": {
547 |             "version": "1.1.1",
548 |             "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
549 |             "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
550 |             "dev": true
551 |         },
552 |         "get-intrinsic": {
553 |             "version": "1.2.0",
554 |             "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
555 |             "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
556 |             "dev": true,
557 |             "requires": {
558 |                 "function-bind": "^1.1.1",
559 |                 "has": "^1.0.3",
560 |                 "has-symbols": "^1.0.3"
561 |             }
562 |         },
563 |         "has": {
564 |             "version": "1.0.3",
565 |             "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
566 |             "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
567 |             "dev": true,
568 |             "requires": {
569 |                 "function-bind": "^1.1.1"
570 |             }
571 |         },
572 |         "has-flag": {
573 |             "version": "4.0.0",
574 |             "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
575 |             "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
576 |             "dev": true
577 |         },
578 |         "has-symbols": {
579 |             "version": "1.0.3",
580 |             "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
581 |             "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
582 |             "dev": true
583 |         },
584 |         "he": {
585 |             "version": "1.2.0",
586 |             "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
587 |             "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
588 |             "dev": true
589 |         },
590 |         "html-encoding-sniffer": {
591 |             "version": "3.0.0",
592 |             "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
593 |             "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
594 |             "dev": true,
595 |             "requires": {
596 |                 "whatwg-encoding": "^2.0.0"
597 |             }
598 |         },
599 |         "http-proxy": {
600 |             "version": "1.18.1",
601 |             "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
602 |             "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
603 |             "dev": true,
604 |             "requires": {
605 |                 "eventemitter3": "^4.0.0",
606 |                 "follow-redirects": "^1.0.0",
607 |                 "requires-port": "^1.0.0"
608 |             }
609 |         },
610 |         "http-server": {
611 |             "version": "14.1.1",
612 |             "resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.1.tgz",
613 |             "integrity": "sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==",
614 |             "dev": true,
615 |             "requires": {
616 |                 "basic-auth": "^2.0.1",
617 |                 "chalk": "^4.1.2",
618 |                 "corser": "^2.0.1",
619 |                 "he": "^1.2.0",
620 |                 "html-encoding-sniffer": "^3.0.0",
621 |                 "http-proxy": "^1.18.1",
622 |                 "mime": "^1.6.0",
623 |                 "minimist": "^1.2.6",
624 |                 "opener": "^1.5.1",
625 |                 "portfinder": "^1.0.28",
626 |                 "secure-compare": "3.0.1",
627 |                 "union": "~0.5.0",
628 |                 "url-join": "^4.0.1"
629 |             }
630 |         },
631 |         "iconv-lite": {
632 |             "version": "0.6.3",
633 |             "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
634 |             "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
635 |             "dev": true,
636 |             "requires": {
637 |                 "safer-buffer": ">= 2.1.2 < 3.0.0"
638 |             }
639 |         },
640 |         "lodash": {
641 |             "version": "4.17.21",
642 |             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
643 |             "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
644 |             "dev": true
645 |         },
646 |         "mime": {
647 |             "version": "1.6.0",
648 |             "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
649 |             "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
650 |             "dev": true
651 |         },
652 |         "minimist": {
653 |             "version": "1.2.8",
654 |             "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
655 |             "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
656 |             "dev": true
657 |         },
658 |         "mkdirp": {
659 |             "version": "0.5.6",
660 |             "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
661 |             "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
662 |             "dev": true,
663 |             "requires": {
664 |                 "minimist": "^1.2.6"
665 |             }
666 |         },
667 |         "ms": {
668 |             "version": "2.1.3",
669 |             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
670 |             "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
671 |             "dev": true
672 |         },
673 |         "object-inspect": {
674 |             "version": "1.12.3",
675 |             "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
676 |             "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
677 |             "dev": true
678 |         },
679 |         "opener": {
680 |             "version": "1.5.2",
681 |             "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
682 |             "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
683 |             "dev": true
684 |         },
685 |         "portfinder": {
686 |             "version": "1.0.32",
687 |             "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
688 |             "integrity": "sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==",
689 |             "dev": true,
690 |             "requires": {
691 |                 "async": "^2.6.4",
692 |                 "debug": "^3.2.7",
693 |                 "mkdirp": "^0.5.6"
694 |             }
695 |         },
696 |         "qs": {
697 |             "version": "6.11.1",
698 |             "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.1.tgz",
699 |             "integrity": "sha512-0wsrzgTz/kAVIeuxSjnpGC56rzYtr6JT/2BwEvMaPhFIoYa1aGO8LbzuU1R0uUYQkLpWBTOj0l/CLAJB64J6nQ==",
700 |             "dev": true,
701 |             "requires": {
702 |                 "side-channel": "^1.0.4"
703 |             }
704 |         },
705 |         "requires-port": {
706 |             "version": "1.0.0",
707 |             "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
708 |             "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
709 |             "dev": true
710 |         },
711 |         "safe-buffer": {
712 |             "version": "5.1.2",
713 |             "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
714 |             "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
715 |             "dev": true
716 |         },
717 |         "safer-buffer": {
718 |             "version": "2.1.2",
719 |             "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
720 |             "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
721 |             "dev": true
722 |         },
723 |         "secure-compare": {
724 |             "version": "3.0.1",
725 |             "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz",
726 |             "integrity": "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==",
727 |             "dev": true
728 |         },
729 |         "side-channel": {
730 |             "version": "1.0.4",
731 |             "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
732 |             "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
733 |             "dev": true,
734 |             "requires": {
735 |                 "call-bind": "^1.0.0",
736 |                 "get-intrinsic": "^1.0.2",
737 |                 "object-inspect": "^1.9.0"
738 |             }
739 |         },
740 |         "supports-color": {
741 |             "version": "7.2.0",
742 |             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
743 |             "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
744 |             "dev": true,
745 |             "requires": {
746 |                 "has-flag": "^4.0.0"
747 |             }
748 |         },
749 |         "union": {
750 |             "version": "0.5.0",
751 |             "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",
752 |             "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==",
753 |             "dev": true,
754 |             "requires": {
755 |                 "qs": "^6.4.0"
756 |             }
757 |         },
758 |         "url-join": {
759 |             "version": "4.0.1",
760 |             "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
761 |             "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==",
762 |             "dev": true
763 |         },
764 |         "whatwg-encoding": {
765 |             "version": "2.0.0",
766 |             "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
767 |             "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
768 |             "dev": true,
769 |             "requires": {
770 |                 "iconv-lite": "0.6.3"
771 |             }
772 |         }
773 |     }
774 | }
775 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "private": true,
 3 |     "name": "pintura-example-javascript",
 4 |     "version": "0.0.0",
 5 |     "author": "Rik Schennink at PQINA",
 6 |     "license": "https://pqina.nl/pintura/license/",
 7 |     "homepage": "https://pqina.nl/pintura/",
 8 |     "description": "A Pintura JavaScript example Project",
 9 |     "main": "index.js",
10 |     "scripts": {
11 |         "start": "npx http-server"
12 |     },
13 |     "dependencies": {
14 |         "@pqina/pintura": "^8.x"
15 |     },
16 |     "devDependencies": {
17 |         "http-server": "^14.1.1"
18 |     }
19 | }
20 | 


--------------------------------------------------------------------------------
/sticker-one.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 128 128">
 2 |     <defs>
 3 |         <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="a">
 4 |             <stop stop-color="#DB3A56" offset="0%"/>
 5 |             <stop stop-color="#F18A5A" offset="100%"/>
 6 |         </linearGradient>
 7 |     </defs>
 8 |     <circle  cx="64" cy="64" r="60" stroke="#fff" stroke-width="7" fill="url(#a)"/>
 9 |     <text x="62" y="87" fill="#fff" font-family="'Arial Black','Arial Bold','Avenir-Black','sans-serif'" font-weight="bold" font-size="64" text-anchor="middle">1</text>
10 | </svg>


--------------------------------------------------------------------------------
/sticker-three.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 128 128">
 2 |     <defs>
 3 |         <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="a">
 4 |             <stop stop-color="#17C176" offset="0%"/>
 5 |             <stop stop-color="#1345B1" offset="100%"/>
 6 |         </linearGradient>
 7 |     </defs>
 8 |     <circle  cx="64" cy="64" r="60" stroke="#fff" stroke-width="7" fill="url(#a)"/>
 9 |     <text x="62" y="87" fill="#fff" font-family="'Arial Black','Arial Bold','Avenir-Black','sans-serif'" font-weight="bold" font-size="64" text-anchor="middle">3</text>
10 | </svg>


--------------------------------------------------------------------------------
/sticker-two.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 128 128">
 2 |     <defs>
 3 |         <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="a">
 4 |             <stop stop-color="#3023AE" offset="0%"/>
 5 |             <stop stop-color="#EC5C51" offset="100%"/>
 6 |         </linearGradient>
 7 |     </defs>
 8 |     <circle  cx="64" cy="64" r="60" stroke="#fff" stroke-width="7" fill="url(#a)"/>
 9 |     <text x="62" y="87" fill="#fff" font-family="'Arial Black','Arial Bold','Avenir-Black','sans-serif'" font-weight="bold" font-size="64" text-anchor="middle">2</text>
10 | </svg>


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
 3 |         Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
 4 |         'Segoe UI Symbol';
 5 |     font-size: 16px;
 6 |     line-height: 1.5;
 7 | }
 8 | 
 9 | body {
10 |     padding: 1em;
11 | }
12 | 
13 | img {
14 |     max-width: 100%;
15 | }
16 | 
17 | /* bright / dark mode */
18 | .pintura-editor {
19 |     --color-background: 255, 255, 255;
20 |     --color-foreground: 10, 10, 10;
21 | }
22 | 
23 | @media (prefers-color-scheme: dark) {
24 |     html {
25 |         color: #fff;
26 |         background: #111;
27 |     }
28 | 
29 |     .pintura-editor {
30 |         --color-background: 10, 10, 10;
31 |         --color-foreground: 255, 255, 255;
32 |     }
33 | }
34 | 


--------------------------------------------------------------------------------