mirror of
https://github.com/visioncortex/vtracer.git
synced 2026-09-26 22:11:28 -07:00
Publish desktop updater 1.0.0-alpha.3
This commit is contained in:
VTracer Release Bot
@@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
dist
|
||||
Symlink
+1
@@ -0,0 +1 @@
|
||||
../../docs/assets
|
||||
Vendored
+5
@@ -0,0 +1,5 @@
|
||||
// A dependency graph that contains any wasm must all be imported
|
||||
// asynchronously. This `bootstrap.js` file does the single async import, so
|
||||
// that no one else needs to worry about it again.
|
||||
import("./index.js")
|
||||
.catch(e => console.error("Error importing `index.js`:", e));
|
||||
@@ -0,0 +1,205 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>VTracer</title>
|
||||
<link rel="apple-touch-icon" sizes="192x192" href="./assets/apple-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="./assets/apple-icon.png">
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
.button {
|
||||
cursor: pointer;
|
||||
font-family: sans-serif;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #aaa;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
#droptext {
|
||||
border: 2px dashed #000;
|
||||
}
|
||||
#droptext.hovering {
|
||||
border: 2px dashed #fff;
|
||||
}
|
||||
#canvas-container {
|
||||
position: absolute;
|
||||
left: 2.5%;
|
||||
top: 5%;
|
||||
width: 95%;
|
||||
height: 90%;
|
||||
}
|
||||
#svg, #frame {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
#svg > path:hover {
|
||||
stroke: #ff0;
|
||||
}
|
||||
#droptext {
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
#options {
|
||||
position: absolute;
|
||||
left: 2.5%;
|
||||
top: 5%;
|
||||
padding: 50px;
|
||||
background: rgba(255,255,255,0.5);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<input type="file" id="imageInput" accept="image/*" style="display: none;">
|
||||
<div>
|
||||
<div id="progressregion" style="display: none;">
|
||||
<progress id="progressbar" value="0" max="100" style="width: 98%;"></progress>
|
||||
</div>
|
||||
<div>
|
||||
<div id="drop">
|
||||
<div id="canvas-container">
|
||||
<div id="droptext">
|
||||
<p>Drag an image here or <a href="#" id="imageSelect">Select file</a></p>
|
||||
</div>
|
||||
<canvas id="frame"></canvas>
|
||||
<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="options">
|
||||
<div>
|
||||
<a class="button" id="export">Download as SVG</a>
|
||||
</div>
|
||||
|
||||
<p></p>
|
||||
|
||||
<div>
|
||||
<div title="Algorithm for segmentation and grouping of pixel clusters">
|
||||
Clustering
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<button id="clustering-binary" title="Black & White (Binary Image)">B/W</button>
|
||||
<button id="clustering-color" title="True Color Image">Color</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<button id="clustering-cutout" title="Shapes disjoint with others">Cutout</button>
|
||||
<button id="clustering-stacked" title="Stack shapes on top of another">Stacked</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div title="Discard patches small than X px in size">
|
||||
Filter Speckle <span>(Cleaner)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="filterspecklevalue">
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
<input id="filterspeckle" type="range" min="1" max="16" step="1" value="4">
|
||||
</div>
|
||||
|
||||
<div class="clustering-color-options">
|
||||
<div title="Number of significant bits to use in a RGB channel">
|
||||
Color Precision <span>(More accurate)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="colorprecisionvalue" class="clustering-color-options">
|
||||
6
|
||||
</div>
|
||||
<div class="clustering-color-options">
|
||||
<input id="colorprecision" type="range" min="1" max="8" step="1" value="6">
|
||||
</div>
|
||||
|
||||
<div class="clustering-color-options">
|
||||
<div title="Color difference between gradient layers">
|
||||
Gradient Step <span>(Less layers)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="layerdifferencevalue" class="clustering-color-options">
|
||||
16
|
||||
</div>
|
||||
<div class="clustering-color-options">
|
||||
<input id="layerdifference" type="range" min="0" max="255" step="1" value="16">
|
||||
</div>
|
||||
|
||||
<p></p>
|
||||
|
||||
<div>
|
||||
<div title="Algorithm for converting clusters to shapes">
|
||||
Curve Fitting
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<button id="none" title="Exact cluster boundary">Pixel</button>
|
||||
<button id="polygon" title="Simplify to Polygon">Polygon</button>
|
||||
<button id="spline" class="selected" title="Smooth and Curve-fit">Spline</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spline-options">
|
||||
<div title="Minimum Momentary Angle (in degrees) to be considered a corner (to be kept after smoothing)">
|
||||
Corner Threshold <span>(Smoother)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cornervalue" class="spline-options">
|
||||
60
|
||||
</div>
|
||||
<div class="spline-options">
|
||||
<input id="corner" type="range" min="0" max="180" step="1" value="60">
|
||||
</div>
|
||||
|
||||
<div class="spline-options">
|
||||
<div title="Perform Iterative Subdivide Smooth until all segments are shorter than this length">
|
||||
Segment Length <span>(More coarse)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="lengthvalue" class="spline-options">
|
||||
4
|
||||
</div>
|
||||
<div class="spline-options">
|
||||
<input id="length" type="range" min="3.5" max="10" step="0.5" value="4">
|
||||
</div>
|
||||
|
||||
<div class="spline-options">
|
||||
<div title="Minimum Angle Displacement (in degrees) to be considered a cutting point between curves">
|
||||
Splice Threshold <span>(More accurate)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="splicevalue" class="spline-options">
|
||||
45
|
||||
</div>
|
||||
<div class="spline-options">
|
||||
<input id="splice" type="range" min="0" max="180" step="1" value="45">
|
||||
</div>
|
||||
|
||||
<div style="display: none">
|
||||
<div class="spline-options">
|
||||
<div title="Number of decimal places used in svg path string">
|
||||
Path Precision <span>(More digits)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pathprecisionvalue" class="spline-options">
|
||||
8
|
||||
</div>
|
||||
<div class="spline-options">
|
||||
<input id="pathprecision" class="uk-range" type="range" min="0" max="16" step="1" value="8">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="./bootstrap.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,490 @@
|
||||
import { BinaryImageConverter, ColorImageConverter } from 'vtracer';
|
||||
|
||||
let runner;
|
||||
const canvas = document.getElementById('frame');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const svg = document.getElementById('svg');
|
||||
const img = new Image();
|
||||
const progress = document.getElementById('progressbar');
|
||||
const progressregion = document.getElementById('progressregion');
|
||||
let mode = 'spline', clustering_mode = 'color', clustering_hierarchical = 'stacked';
|
||||
|
||||
// Hide canas and svg on load
|
||||
canvas.style.display = 'none';
|
||||
svg.style.display = 'none';
|
||||
|
||||
// Paste from clipboard
|
||||
document.addEventListener('paste', function (e) {
|
||||
if (e.clipboardData) {
|
||||
var items = e.clipboardData.items;
|
||||
if (!items) return;
|
||||
|
||||
//access data directly
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
if (items[i].type.indexOf("image") !== -1) {
|
||||
//image
|
||||
var blob = items[i].getAsFile();
|
||||
var URLObj = window.URL || window.webkitURL;
|
||||
var source = URLObj.createObjectURL(blob);
|
||||
setSourceAndRestart(source);
|
||||
}
|
||||
}
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
// Download as SVG
|
||||
document.getElementById('export').addEventListener('click', function (e) {
|
||||
const blob = new Blob([
|
||||
`<?xml version="1.0" encoding="UTF-8"?>\n`,
|
||||
`<!-- Generator: visioncortex VTracer -->\n`,
|
||||
new XMLSerializer().serializeToString(svg)
|
||||
], {type: 'octet/stream'}),
|
||||
url = window.URL.createObjectURL(blob);
|
||||
|
||||
this.href = url;
|
||||
this.target = '_blank';
|
||||
|
||||
this.download = 'export-' + new Date().toISOString().slice(0, 19).replace(/:/g, '').replace('T', ' ') + '.svg';
|
||||
});
|
||||
|
||||
// Store template config
|
||||
var presetConfigs = [
|
||||
{
|
||||
src: 'assets/samples/K1_drawing.jpg',
|
||||
clustering_mode: 'binary',
|
||||
clustering_hierarchical: 'stacked',
|
||||
filter_speckle: 4,
|
||||
color_precision: 6,
|
||||
path_precision: 8,
|
||||
layer_difference: 16,
|
||||
mode: 'spline',
|
||||
corner_threshold: 60,
|
||||
length_threshold: 4,
|
||||
splice_threshold: 45,
|
||||
source: 'https://commons.wikimedia.org/wiki/File:K1_drawing.jpg',
|
||||
credit: '<a href="https://commons.wikimedia.org/">Wikimedia</a>',
|
||||
},
|
||||
{
|
||||
src: 'assets/samples/Cityscape Sunset_DFM3-01.jpg',
|
||||
clustering_mode: 'color',
|
||||
clustering_hierarchical: 'stacked',
|
||||
filter_speckle: 4,
|
||||
color_precision: 8,
|
||||
path_precision: 8,
|
||||
layer_difference: 25,
|
||||
mode: 'spline',
|
||||
corner_threshold: 60,
|
||||
length_threshold: 4,
|
||||
splice_threshold: 45,
|
||||
source: 'https://www.vecteezy.com/vector-art/227400-beautiful-cityscape-at-sunset',
|
||||
credit: '<a href="https://www.vecteezy.com/free-vector/building">Building Vectors by Vecteezy</a>',
|
||||
},
|
||||
{
|
||||
src: 'assets/samples/Gum Tree Vector.jpg',
|
||||
clustering_mode: 'color',
|
||||
clustering_hierarchical: 'stacked',
|
||||
filter_speckle: 4,
|
||||
color_precision: 8,
|
||||
path_precision: 8,
|
||||
layer_difference: 28,
|
||||
mode: 'spline',
|
||||
corner_threshold: 60,
|
||||
length_threshold: 4,
|
||||
splice_threshold: 45,
|
||||
source: 'https://www.vecteezy.com/vector-art/172177-gum-tree-vector',
|
||||
credit: '<a href="https://www.vecteezy.com/free-vector/nature">Nature Vectors by Vecteezy</a>',
|
||||
},
|
||||
{
|
||||
src: 'assets/samples/vectorstock_31191940.png',
|
||||
clustering_mode: 'color',
|
||||
clustering_hierarchical: 'stacked',
|
||||
filter_speckle: 8,
|
||||
color_precision: 7,
|
||||
path_precision: 8,
|
||||
layer_difference: 64,
|
||||
mode: 'spline',
|
||||
corner_threshold: 60,
|
||||
length_threshold: 4,
|
||||
splice_threshold: 45,
|
||||
source: 'https://www.vectorstock.com/royalty-free-vector/dessert-poster-design-with-chocolate-cake-mousses-vector-31191940',
|
||||
credit: '<a href="https://www.vectorstock.com/royalty-free-vector/dessert-poster-design-with-chocolate-cake-mousses-vector-31191940">Vector image by VectorStock / vectorstock</a>',
|
||||
},
|
||||
{
|
||||
src: 'assets/samples/angel-luciano-LATYeZyw88c-unsplash-s.jpg',
|
||||
clustering_mode: 'color',
|
||||
clustering_hierarchical: 'stacked',
|
||||
filter_speckle: 10,
|
||||
color_precision: 8,
|
||||
path_precision: 8,
|
||||
layer_difference: 48,
|
||||
mode: 'spline',
|
||||
corner_threshold: 180,
|
||||
length_threshold: 4,
|
||||
splice_threshold: 45,
|
||||
source: 'https://unsplash.com/photos/LATYeZyw88c',
|
||||
credit: '<span>Photo by <a href="https://unsplash.com/@roaming_angel?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Angel Luciano</a> on <a href="https://unsplash.com/s/photos/dog?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></span>',
|
||||
},
|
||||
{
|
||||
src: 'assets/samples/tank-unit-preview.png',
|
||||
clustering_mode: 'color',
|
||||
clustering_hierarchical: 'stacked',
|
||||
filter_speckle: 0,
|
||||
color_precision: 8,
|
||||
path_precision: 8,
|
||||
layer_difference: 0,
|
||||
mode: 'none',
|
||||
corner_threshold: 180,
|
||||
length_threshold: 4,
|
||||
splice_threshold: 45,
|
||||
source: 'https://opengameart.org/content/sideview-sci-fi-patreon-collection',
|
||||
credit: '<span>Artwork by <a href="https://opengameart.org/content/sideview-sci-fi-patreon-collection">Luis Zuno</a> on <a href="https://opengameart.org/">opengameart.org</a></span>',
|
||||
},
|
||||
];
|
||||
|
||||
// Insert gallery items dynamically
|
||||
if (document.getElementById('galleryslider')) {
|
||||
for (let i = 0; i < presetConfigs.length; i++) {
|
||||
document.getElementById('galleryslider').innerHTML +=
|
||||
`<li>
|
||||
<div class="galleryitem uk-panel uk-flex uk-flex-center">
|
||||
<a href="#">
|
||||
<img src="${presetConfigs[i].src}" title="${presetConfigs[i].source}">
|
||||
</a>
|
||||
</div>
|
||||
</li>`;
|
||||
document.getElementById('credits-modal-content').innerHTML +=
|
||||
`<p>${presetConfigs[i].credit}</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
// Function to load a given config WITHOUT restarting
|
||||
function loadConfig(config) {
|
||||
mode = config.mode;
|
||||
clustering_mode = config.clustering_mode;
|
||||
clustering_hierarchical = config.clustering_hierarchical;
|
||||
|
||||
globalcorner = config.corner_threshold;
|
||||
document.getElementById('cornervalue').innerHTML = globalcorner;
|
||||
document.getElementById('corner').value = globalcorner;
|
||||
|
||||
globallength = config.length_threshold;
|
||||
document.getElementById('lengthvalue').innerHTML = globallength;
|
||||
document.getElementById('length').value = globallength;
|
||||
|
||||
globalsplice = config.splice_threshold;
|
||||
document.getElementById('splicevalue').innerHTML = globalsplice;
|
||||
document.getElementById('splice').value = globalsplice;
|
||||
|
||||
globalfilterspeckle = config.filter_speckle;
|
||||
document.getElementById('filterspecklevalue').innerHTML = globalfilterspeckle;
|
||||
document.getElementById('filterspeckle').value = globalfilterspeckle;
|
||||
|
||||
globalcolorprecision = config.color_precision;
|
||||
document.getElementById('colorprecisionvalue').innerHTML = globalcolorprecision;
|
||||
document.getElementById('colorprecision').value = globalcolorprecision;
|
||||
|
||||
globallayerdifference = config.layer_difference;
|
||||
document.getElementById('layerdifferencevalue').innerHTML = globallayerdifference;
|
||||
document.getElementById('layerdifference').value = globallayerdifference;
|
||||
|
||||
globalpathprecision = config.path_precision;
|
||||
document.getElementById('pathprecisionvalue').innerHTML = globalpathprecision;
|
||||
document.getElementById('pathprecision').value = globalpathprecision;
|
||||
}
|
||||
|
||||
// Choose template from gallery
|
||||
let chooseGalleryButtons = document.querySelectorAll('.galleryitem a');
|
||||
chooseGalleryButtons.forEach(item => {
|
||||
item.addEventListener('click', function (e) {
|
||||
// Load preset template config
|
||||
let i = Array.prototype.indexOf.call(chooseGalleryButtons, item);
|
||||
if (presetConfigs.length > i) {
|
||||
loadConfig(presetConfigs[i]);
|
||||
}
|
||||
|
||||
// Set source as specified
|
||||
setSourceAndRestart(this.firstElementChild.src);
|
||||
});
|
||||
});
|
||||
|
||||
// Upload button
|
||||
var imageSelect = document.getElementById('imageSelect'),
|
||||
imageInput = document.getElementById('imageInput');
|
||||
imageSelect.addEventListener('click', function (e) {
|
||||
imageInput.click();
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
imageInput.addEventListener('change', function (e) {
|
||||
setSourceAndRestart(this.files[0]);
|
||||
});
|
||||
|
||||
// Drag-n-Drop
|
||||
var drop = document.getElementById('drop');
|
||||
var droptext = document.getElementById('droptext');
|
||||
drop.addEventListener('dragenter', function (e) {
|
||||
if (e.preventDefault) e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'copy';
|
||||
droptext.classList.add('hovering');
|
||||
return false;
|
||||
});
|
||||
|
||||
drop.addEventListener('dragleave', function (e) {
|
||||
if (e.preventDefault) e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'copy';
|
||||
droptext.classList.remove('hovering');
|
||||
return false;
|
||||
});
|
||||
|
||||
drop.addEventListener('dragover', function (e) {
|
||||
if (e.preventDefault) e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'copy';
|
||||
droptext.classList.add('hovering');
|
||||
return false;
|
||||
});
|
||||
|
||||
drop.addEventListener('drop', function (e) {
|
||||
if (e.preventDefault) e.preventDefault();
|
||||
droptext.classList.remove('hovering');
|
||||
setSourceAndRestart(e.dataTransfer.files[0]);
|
||||
return false;
|
||||
});
|
||||
|
||||
// Get Input from UI controls
|
||||
var globalcorner = parseInt(document.getElementById('corner').value),
|
||||
globallength = parseFloat(document.getElementById('length').value),
|
||||
globalsplice = parseInt(document.getElementById('splice').value),
|
||||
globalfilterspeckle = parseInt(document.getElementById('filterspeckle').value),
|
||||
globalcolorprecision = parseInt(document.getElementById('colorprecision').value),
|
||||
globallayerdifference = parseInt(document.getElementById('layerdifference').value),
|
||||
globalpathprecision = parseInt(document.getElementById('pathprecision').value);
|
||||
|
||||
// Load past inputs from localStorage
|
||||
/*
|
||||
if (localStorage.VSsettings) {
|
||||
var settings = JSON.parse(localStorage.VSsettings);
|
||||
document.getElementById('cornervalue').innerHTML = document.getElementById('corner').value = globalcorner = settings.globalcorner;
|
||||
document.getElementById('lengthvalue').innerHTML = document.getElementById('length').value = globallength = settings.globallength;
|
||||
document.getElementById('splicevalue').innerHTML = document.getElementById('splice').value = globalsplice = settings.globalsplice;
|
||||
}
|
||||
*/
|
||||
|
||||
document.getElementById('none').addEventListener('click', function (e) {
|
||||
mode = 'none';
|
||||
restart();
|
||||
}, false);
|
||||
|
||||
document.getElementById('polygon').addEventListener('click', function (e) {
|
||||
mode = 'polygon';
|
||||
restart();
|
||||
}, false);
|
||||
|
||||
document.getElementById('spline').addEventListener('click', function (e) {
|
||||
mode = 'spline';
|
||||
restart();
|
||||
}, false);
|
||||
|
||||
document.getElementById('clustering-binary').addEventListener('click', function (e) {
|
||||
clustering_mode = 'binary';
|
||||
restart();
|
||||
}, false);
|
||||
|
||||
document.getElementById('clustering-color').addEventListener('click', function (e) {
|
||||
clustering_mode = 'color';
|
||||
restart();
|
||||
}, false);
|
||||
|
||||
document.getElementById('clustering-cutout').addEventListener('click', function (e) {
|
||||
clustering_hierarchical = 'cutout';
|
||||
restart();
|
||||
}, false);
|
||||
|
||||
document.getElementById('clustering-stacked').addEventListener('click', function (e) {
|
||||
clustering_hierarchical = 'stacked';
|
||||
restart();
|
||||
}, false);
|
||||
|
||||
document.getElementById('filterspeckle').addEventListener('change', function (e) {
|
||||
globalfilterspeckle = parseInt(this.value);
|
||||
document.getElementById('filterspecklevalue').innerHTML = this.value;
|
||||
restart();
|
||||
});
|
||||
|
||||
document.getElementById('colorprecision').addEventListener('change', function (e) {
|
||||
globalcolorprecision = parseInt(this.value);
|
||||
document.getElementById('colorprecisionvalue').innerHTML = this.value;
|
||||
restart();
|
||||
});
|
||||
|
||||
document.getElementById('layerdifference').addEventListener('change', function (e) {
|
||||
globallayerdifference = parseInt(this.value);
|
||||
document.getElementById('layerdifferencevalue').innerHTML = this.value;
|
||||
restart();
|
||||
});
|
||||
|
||||
document.getElementById('corner').addEventListener('change', function (e) {
|
||||
globalcorner = parseInt(this.value);
|
||||
document.getElementById('cornervalue').innerHTML = this.value;
|
||||
restart();
|
||||
});
|
||||
|
||||
document.getElementById('length').addEventListener('change', function (e) {
|
||||
globallength = parseFloat(this.value);
|
||||
document.getElementById('lengthvalue').innerHTML = this.value;
|
||||
restart();
|
||||
});
|
||||
|
||||
document.getElementById('splice').addEventListener('change', function (e) {
|
||||
globalsplice = parseInt(this.value);
|
||||
document.getElementById('splicevalue').innerHTML = this.value;
|
||||
restart();
|
||||
});
|
||||
|
||||
document.getElementById('pathprecision').addEventListener('change', function (e) {
|
||||
globalpathprecision = parseInt(this.value);
|
||||
document.getElementById('pathprecisionvalue').innerHTML = this.value;
|
||||
restart();
|
||||
});
|
||||
|
||||
// Save inputs before unloading
|
||||
/*
|
||||
window.addEventListener('beforeunload', function () {
|
||||
localStorage.VSsettings = JSON.stringify({
|
||||
globalcorner: globalcorner,
|
||||
globallength: globallength,
|
||||
globalsplice: globalsplice,
|
||||
});
|
||||
});
|
||||
*/
|
||||
|
||||
function setSourceAndRestart(source) {
|
||||
img.src = source instanceof File ? URL.createObjectURL(source) : source;
|
||||
img.onload = function () {
|
||||
const width = img.naturalWidth, height = img.naturalHeight;
|
||||
svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
|
||||
canvas.width = img.naturalWidth;
|
||||
canvas.height = img.naturalHeight;
|
||||
if (height > width) {
|
||||
document.getElementById('canvas-container').style.width = '50%';
|
||||
document.getElementById('canvas-container').style.marginBottom = (height / width * 50) + '%';
|
||||
} else {
|
||||
document.getElementById('canvas-container').style.width = '';
|
||||
document.getElementById('canvas-container').style.marginBottom = (height / width * 100) + '%';
|
||||
}
|
||||
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
||||
ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||
restart();
|
||||
}
|
||||
// Show display
|
||||
canvas.style.display = 'block';
|
||||
svg.style.display = 'block';
|
||||
// Hide upload text
|
||||
droptext.style.display = 'none';
|
||||
}
|
||||
|
||||
function restart() {
|
||||
document.getElementById('clustering-binary').classList.remove('selected');
|
||||
document.getElementById('clustering-color').classList.remove('selected');
|
||||
document.getElementById('clustering-' + clustering_mode).classList.add('selected');
|
||||
Array.from(document.getElementsByClassName('clustering-color-options')).forEach((el) => {
|
||||
el.style.display = clustering_mode == 'color' ? '' : 'none';
|
||||
});
|
||||
|
||||
document.getElementById('clustering-cutout').classList.remove('selected');
|
||||
document.getElementById('clustering-stacked').classList.remove('selected');
|
||||
document.getElementById('clustering-' + clustering_hierarchical).classList.add('selected');
|
||||
|
||||
document.getElementById('none').classList.remove('selected');
|
||||
document.getElementById('polygon').classList.remove('selected');
|
||||
document.getElementById('spline').classList.remove('selected');
|
||||
document.getElementById(mode).classList.add('selected');
|
||||
Array.from(document.getElementsByClassName('spline-options')).forEach((el) => {
|
||||
el.style.display = mode == 'spline' ? '' : 'none';
|
||||
});
|
||||
|
||||
if (!img.src) {
|
||||
return;
|
||||
}
|
||||
while (svg.firstChild) {
|
||||
svg.removeChild(svg.firstChild);
|
||||
}
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(img, 0, 0);
|
||||
let converter_params = JSON.stringify({
|
||||
'canvas_id': canvas.id,
|
||||
'svg_id': svg.id,
|
||||
'mode': mode,
|
||||
'clustering_mode': clustering_mode,
|
||||
'hierarchical': clustering_hierarchical,
|
||||
'corner_threshold': deg2rad(globalcorner),
|
||||
'length_threshold': globallength,
|
||||
'max_iterations': 10,
|
||||
'splice_threshold': deg2rad(globalsplice),
|
||||
'filter_speckle': globalfilterspeckle*globalfilterspeckle,
|
||||
'color_precision': 8-globalcolorprecision,
|
||||
'layer_difference': globallayerdifference,
|
||||
'path_precision': globalpathprecision,
|
||||
});
|
||||
if (runner) {
|
||||
runner.stop();
|
||||
}
|
||||
runner = new ConverterRunner(converter_params);
|
||||
progress.value = 0;
|
||||
progressregion.style.display = 'block';
|
||||
runner.run();
|
||||
}
|
||||
|
||||
function deg2rad(deg) {
|
||||
return deg/180*3.141592654;
|
||||
}
|
||||
|
||||
class ConverterRunner {
|
||||
constructor (converter_params) {
|
||||
this.converter =
|
||||
clustering_mode == 'color' ?
|
||||
ColorImageConverter.new_with_string(converter_params):
|
||||
BinaryImageConverter.new_with_string(converter_params);
|
||||
this.converter.init();
|
||||
this.stopped = false;
|
||||
if (clustering_mode == 'binary') {
|
||||
svg.style.background = '#fff';
|
||||
canvas.style.display = 'none';
|
||||
} else {
|
||||
svg.style.background = '';
|
||||
canvas.style.display = '';
|
||||
}
|
||||
canvas.style.opacity = '';
|
||||
}
|
||||
|
||||
run () {
|
||||
const This = this;
|
||||
setTimeout(function tick () {
|
||||
if (!This.stopped) {
|
||||
let done = false;
|
||||
const startTick = performance.now();
|
||||
while (!(done = This.converter.tick()) &&
|
||||
performance.now() - startTick < 25) {
|
||||
}
|
||||
progress.value = This.converter.progress();
|
||||
if (progress.value >= 50) {
|
||||
canvas.style.display = 'none';
|
||||
} else {
|
||||
canvas.style.opacity = (50 - progress.value) / 25;
|
||||
}
|
||||
if (progress.value >= progress.max) {
|
||||
progressregion.style.display = 'none';
|
||||
progress.value = 0;
|
||||
}
|
||||
if (!done) {
|
||||
setTimeout(tick, 1);
|
||||
}
|
||||
}
|
||||
}, 1);
|
||||
}
|
||||
|
||||
stop () {
|
||||
this.stopped = true;
|
||||
this.converter.free();
|
||||
}
|
||||
}
|
||||
Generated
+4376
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "vtracer-app",
|
||||
"version": "0.1.0",
|
||||
"description": "VTracer Webapp",
|
||||
"author": "Chris Tsang <chris.2y3@outlook.com>",
|
||||
"license": "proprietary",
|
||||
"private": true,
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "webpack serve",
|
||||
"build": "webpack"
|
||||
},
|
||||
"keywords": [
|
||||
"rust",
|
||||
"wasm"
|
||||
],
|
||||
"dependencies": {
|
||||
"vtracer": "file:../pkg",
|
||||
"webpack": "^5.101.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"webpack-cli": "^6.0.1",
|
||||
"webpack-dev-server": "^5.2.2"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
entry: "./bootstrap.js",
|
||||
output: {
|
||||
path: path.resolve(__dirname, "dist"),
|
||||
filename: "bootstrap.js",
|
||||
clean: true,
|
||||
},
|
||||
mode: "development",
|
||||
// wasm-pack's `bundler` target emits ESM imports of the .wasm module; webpack
|
||||
// 5 handles those natively once this experiment is on.
|
||||
experiments: {
|
||||
asyncWebAssembly: true,
|
||||
},
|
||||
devServer: {
|
||||
//host: "0.0.0.0",
|
||||
port: 8080,
|
||||
// dev-server 5 defaults its static root to ./public, which would leave
|
||||
// index.html unserved. `assets` symlinks to ../../docs/assets for samples.
|
||||
static: { directory: __dirname },
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user