Example for pixel art

This commit is contained in:
Chris Tsang
2020-12-09 14:35:49 +08:00
parent 1b49880f85
commit 5c9d5cd757
9 changed files with 10 additions and 9 deletions

View File

@@ -26,6 +26,8 @@ Comparing to [Potrace]() which only accept binarized inputs (Black & White pixma
Comparing to Adobe Illustrator's Live Trace, VTracer's output is much more compact (less shapes) as we adopt a stacking strategy and avoid producing shapes with holes.
By setting both `filter_speckle` and `layer_difference` to `0`, VTracer can also handle pixel art.
A technical description of the algorithm is on [visioncortex.org/vtracer-docs](//www.visioncortex.org/vtracer-docs).
## Web App

File diff suppressed because one or more lines are too long

View File

@@ -14,10 +14,9 @@ vectorstock_31191940
Color 8,7,64
<a href="https://www.vectorstock.com/royalty-free-vector/dessert-poster-design-with-chocolate-cake-mousses-vector-31191940">Vector image by VectorStock / vectorstock</a>
averie-woodard-4nulm-JUYFo-unsplash
Color 8,7,24
<span>Photo by <a href="https://unsplash.com/@averieclaire?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">averie woodard</a> on <a href="https://unsplash.com/s/photos/portrait?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
angel-luciano-LATYeZyw88c-unsplash
Color 10,8,48 180
<span>Photo by <a href="https://unsplash.com/@roaming_angel?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Angel Luciano</a> on <a href="https://unsplash.com/s/photos/dog?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
<span>Photo by <a href="https://unsplash.com/@roaming_angel?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Angel Luciano</a> on <a href="https://unsplash.com/s/photos/dog?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
spaceships.png
https://opengameart.org/content/spaceships-1

Binary file not shown.

Before

Width:  |  Height:  |  Size: 304 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

2
docs/bootstrap.js vendored
View File

@@ -258,7 +258,7 @@
/******/ promises.push(installedWasmModuleData);
/******/ else {
/******/ var importObject = wasmImportObjects[wasmModuleId]();
/******/ var req = fetch(__webpack_require__.p + "" + {"../pkg/vtracer_webapp_bg.wasm":"7ef94c5089d40af744f2"}[wasmModuleId] + ".module.wasm");
/******/ var req = fetch(__webpack_require__.p + "" + {"../pkg/vtracer_webapp_bg.wasm":"b7eade6237b469ef7df5"}[wasmModuleId] + ".module.wasm");
/******/ var promise;
/******/ if(importObject instanceof Promise && typeof WebAssembly.compileStreaming === 'function') {
/******/ promise = Promise.all([WebAssembly.compileStreaming(req), importObject]).then(function(items) {

View File

@@ -160,7 +160,7 @@
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
<a class="uk-align-right uk-text-meta" style="margin:-5px;" uk-toggle="target: #credits-modal">Credits</a>
<a class="uk-align-right uk-text-meta" style="margin:-5px;" uk-toggle="target: #credits-modal">Photo Credits</a>
</div>
<div id="drop" class="uk-padding uk-flex uk-flex-center">
<div id="canvas-container" class="uk-width-1-1" style="height: 480px;">
@@ -202,7 +202,7 @@
4
</div>
<div class="uk-width-5-6">
<input id="filterspeckle" class="uk-range" type="range" min="1" max="128" step="1" value="4">
<input id="filterspeckle" class="uk-range" type="range" min="0" max="128" step="1" value="4">
</div>
<div class="clustering-color-options uk-width-1-1 uk-flex uk-flex-right">