Merge pull request #5 from sylmroz/main

Create colored svg in c++ code.
tomayac · Feb 2, 2022 · 5e874f1 · 5e874f1
2 parents b2644d0 + 0f1f806
commit 5e874f1
Show file tree

Hide file tree

Showing 20 changed files with 595 additions and 1,754 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,33 @@
-.DS_Store
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+/.idea/
+
+# dependencies
+/**/node_modules
+/**/.pnp
+/**/.pnp.js
+
+# testing
+/**/coverage
+
+# production
+/**/build
+/**/dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+!/**/.gitkeep
+
+/**/.cache
+
+.vscode
+.vs
diff --git a/build.ps1 b/build.ps1
@@ -0,0 +1,7 @@
+if (Test-Path $dist/index.js) {
+    Remove-Item dist/index.js
+}
+
+em++ -O3 -std=c++20 (ls wasm/*.c) --post-js src/potrace.js -s WASM=1 -s "ALLOW_MEMORY_GROWTH=1" -s "SINGLE_FILE=1" -o dist/index.js
+
+Add-Content -Path dist/index.js -Value "export { potrace, ready as init };"
diff --git a/build.sh b/build.sh
@@ -6,4 +6,4 @@ DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 
 cd $DIR && rm -f lib/*
 
-cd $DIR && emcc -O3 wasm/*.c --post-js src/potrace.js -s WASM=1 -s EXPORTED_FUNCTIONS='["_start"]' -s "ALLOW_MEMORY_GROWTH=1" -s "SINGLE_FILE=1" -o dist/index.js
+cd $DIR && em++ -O3 -std=gnu++20 wasm/*.c --post-js src/potrace.js -s WASM=1 -s EXPORTED_FUNCTIONS='["_start"]' -s "ALLOW_MEMORY_GROWTH=1" -s "SINGLE_FILE=1" -o dist/index.js
diff --git a/demo/avatar.jpg b/demo/avatar.jpg
diff --git a/demo/index.html b/demo/index.html
@@ -10,10 +10,30 @@
     <script src="./script.js" type="module"></script>
   </head>
   <body>
-    <img src="./snail.png" width="256" height="256" alt="A snail." />
+    <h1>ESM Potrace Wasm Demo</h1>
+
+    <h2>Raster illustration</h2>
+
+    <img src="./logo.png" width="127" height="138" alt="The potrace logo." />
+
+    <h3>Color</h3>
     <div id="div1"></div>
     <pre id="pre1"></pre>
+
+    <h3>Black and white</h3>
     <div id="div2"></div>
     <pre id="pre2"></pre>
+
+    <h2>Raster photo</h2>
+
+    <img src="./avatar.jpg" width="400" height="400" alt="An avatar." />
+
+    <h3>Color</h3>
+    <div id="div3"></div>
+    <pre id="pre3"></pre>
+
+    <h3>Black and white</h3>
+    <div id="div4"></div>
+    <pre id="pre4"></pre>
   </body>
 </html>
diff --git a/demo/logo.png b/demo/logo.png
diff --git a/demo/script.js b/demo/script.js
@@ -3,36 +3,76 @@ import { potrace, init } from '../dist/index.js';
 (async () => {
   const pre1 = document.querySelector('#pre1');
   const pre2 = document.querySelector('#pre2');
+  const pre3 = document.querySelector('#pre3');
+  const pre4 = document.querySelector('#pre4');
   const div1 = document.querySelector('#div1');
   const div2 = document.querySelector('#div2');
+  const div3 = document.querySelector('#div3');
+  const div4 = document.querySelector('#div4');
 
-  const blob = await fetch('./snail.png').then((response) => response.blob());
+  const blob1 = await fetch('./logo.png').then((response) => response.blob());
+  const blob2 = await fetch('./avatar.jpg').then((response) => response.blob());
 
   await init();
 
-  potrace(blob, {
-    turdsize: 1,
+  potrace(blob1, {
+    turdsize: 2,
     turnpolicy: 4,
     alphamax: 1,
     opticurve: 1,
     opttolerance: 0.2,
     pathonly: false,
+    extractcolors: true,
+    posterizelevel: 2,
+    posterizationalgorithm: 0, // 0: simple, 1: interpolation
   }).then((svg) => {
     div1.innerHTML = svg;
     svg = svg.replaceAll('><', '>\n<');
     pre1.textContent = svg + '\n\n(' + svg.length + ')';
   });
 
-  potrace(blob, {
+  potrace(blob1, {
     turdsize: 2,
     turnpolicy: 4,
     alphamax: 1,
     opticurve: 1,
     opttolerance: 0.2,
     pathonly: false,
+    extractcolors: false,
   }).then((svg) => {
     div2.innerHTML = svg;
     svg = svg.replaceAll('><', '>\n<');
     pre2.textContent = svg + '\n\n(' + svg.length + ')';
   });
+
+  potrace(blob2, {
+    turdsize: 2,
+    turnpolicy: 4,
+    alphamax: 1,
+    opticurve: 1,
+    opttolerance: 0.2,
+    pathonly: false,
+    extractcolors: true,
+    posterizelevel: 3,
+    posterizationalgorithm: 1, // 0: simple, 1: interpolation
+  }).then((svg) => {
+    div3.innerHTML = svg;
+    svg = svg.replaceAll('><', '>\n<');
+    pre3.textContent = svg + '\n\n(' + svg.length + ')';
+  });
+
+  potrace(blob2, {
+    turdsize: 2,
+    turnpolicy: 4,
+    alphamax: 1,
+    opticurve: 1,
+    opttolerance: 0.2,
+    pathonly: false,
+    extractcolors: false,
+  }).then((svg) => {
+    div4.innerHTML = svg;
+    svg = svg.replaceAll('><', '>\n<');
+    pre4.textContent = svg + '\n\n(' + svg.length + ')';
+  });
+
 })();
diff --git a/demo/snail.png b/demo/snail.png
diff --git a/demo/style.css b/demo/style.css
@@ -35,3 +35,8 @@ video {
   height: auto;
   max-width: 100%;
 }
+
+pre {
+  max-height: 10rem;
+  overflow: scroll;
+}
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/index.min.js b/dist/index.min.js