vh/vtracer
1
0
Fork 0
mirror of https://github.com/visioncortex/vtracer.git synced 2026-09-28 23:11:21 -07:00
Code Issues Actions Packages Projects Releases Wiki Activity

Touch

Browse Source
This commit is contained in:
Chris Tsang
2020-10-25 14:49:59 +08:00
parent 1d3407eec1
commit 00375567cc
2 changed files with 464 additions and 464 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/app/index.html
+3 -3
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>VTracer</title> <title>VTracer</title>
@@ -182,4 +182,4 @@
</div> </div>
<script src="./bootstrap.js"></script> <script src="./bootstrap.js"></script>
</body> </body>
</html> </html>
webapp/app/index.js
+71 -71
View File
@@ -1,20 +1,20 @@
import { BinaryImageConverter, ColorImageConverter } from 'vtracer'; import { BinaryImageConverter, ColorImageConverter } from 'vtracer';
let runner; let runner;
const canvas = document.getElementById('frame'); const canvas = document.getElementById('frame');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
const svg = document.getElementById('svg'); const svg = document.getElementById('svg');
const img = new Image(); const img = new Image();
const progress = document.getElementById('progressbar'); const progress = document.getElementById('progressbar');
const progressregion = document.getElementById('progressregion'); const progressregion = document.getElementById('progressregion');
let mode = 'spline', clustering_mode = 'color'; let mode = 'spline', clustering_mode = 'color';
// Hide canas and svg on load // Hide canas and svg on load
canvas.style.display = 'none'; canvas.style.display = 'none';
svg.style.display = 'none'; svg.style.display = 'none';
// Paste from clipboard // Paste from clipboard
document.addEventListener('paste', function (e) { document.addEventListener('paste', function (e) {
if (e.clipboardData) { if (e.clipboardData) {
var items = e.clipboardData.items; var items = e.clipboardData.items;
if (!items) return; if (!items) return;
@@ -31,10 +31,10 @@ document.addEventListener('paste', function (e) {
} }
e.preventDefault(); e.preventDefault();
} }
}); });
// Download as SVG // Download as SVG
document.getElementById('export').addEventListener('click', function (e) { document.getElementById('export').addEventListener('click', function (e) {
const blob = new Blob([new XMLSerializer().serializeToString(svg)], {type: 'octet/stream'}), const blob = new Blob([new XMLSerializer().serializeToString(svg)], {type: 'octet/stream'}),
url = window.URL.createObjectURL(blob); url = window.URL.createObjectURL(blob);
@@ -42,10 +42,10 @@ document.getElementById('export').addEventListener('click', function (e) {
this.target = '_blank'; this.target = '_blank';
this.download = 'export-' + new Date().toISOString().slice(0, 19).replace(/:/g, '').replace('T', ' ') + '.svg'; this.download = 'export-' + new Date().toISOString().slice(0, 19).replace(/:/g, '').replace('T', ' ') + '.svg';
}); });
// Function to load a given config WITHOUT restarting // Function to load a given config WITHOUT restarting
function loadConfig(config) { function loadConfig(config) {
mode = config.mode; mode = config.mode;
clustering_mode = config.clustering_mode; clustering_mode = config.clustering_mode;
@@ -73,121 +73,121 @@ function loadConfig(config) {
document.getElementById('layerdifferencevalue').innerHTML = globallayerdifference; document.getElementById('layerdifferencevalue').innerHTML = globallayerdifference;
document.getElementById('layerdifference').value = globallayerdifference; document.getElementById('layerdifference').value = globallayerdifference;
} }
// Upload button // Upload button
var imageSelect = document.getElementById('imageSelect'), var imageSelect = document.getElementById('imageSelect'),
imageInput = document.getElementById('imageInput'); imageInput = document.getElementById('imageInput');
imageSelect.addEventListener('click', function (e) { imageSelect.addEventListener('click', function (e) {
imageInput.click(); imageInput.click();
e.preventDefault(); e.preventDefault();
}); });
imageInput.addEventListener('change', function (e) { imageInput.addEventListener('change', function (e) {
setSourceAndRestart(this.files[0]); setSourceAndRestart(this.files[0]);
}); });
// Drag-n-Drop // Drag-n-Drop
var drop = document.getElementById('drop'); var drop = document.getElementById('drop');
var droptext = document.getElementById('droptext'); var droptext = document.getElementById('droptext');
drop.addEventListener('dragenter', function (e) { drop.addEventListener('dragenter', function (e) {
if (e.preventDefault) e.preventDefault(); if (e.preventDefault) e.preventDefault();
e.dataTransfer.dropEffect = 'copy'; e.dataTransfer.dropEffect = 'copy';
droptext.classList.add('hovering'); droptext.classList.add('hovering');
return false; return false;
}); });
drop.addEventListener('dragleave', function (e) { drop.addEventListener('dragleave', function (e) {
if (e.preventDefault) e.preventDefault(); if (e.preventDefault) e.preventDefault();
e.dataTransfer.dropEffect = 'copy'; e.dataTransfer.dropEffect = 'copy';
droptext.classList.remove('hovering'); droptext.classList.remove('hovering');
return false; return false;
}); });
drop.addEventListener('dragover', function (e) { drop.addEventListener('dragover', function (e) {
if (e.preventDefault) e.preventDefault(); if (e.preventDefault) e.preventDefault();
e.dataTransfer.dropEffect = 'copy'; e.dataTransfer.dropEffect = 'copy';
droptext.classList.add('hovering'); droptext.classList.add('hovering');
return false; return false;
}); });
drop.addEventListener('drop', function (e) { drop.addEventListener('drop', function (e) {
if (e.preventDefault) e.preventDefault(); if (e.preventDefault) e.preventDefault();
droptext.classList.remove('hovering'); droptext.classList.remove('hovering');
setSourceAndRestart(e.dataTransfer.files[0]); setSourceAndRestart(e.dataTransfer.files[0]);
return false; return false;
}); });
// Get Input from UI controls // Get Input from UI controls
var globalcorner = parseInt(document.getElementById('corner').value), var globalcorner = parseInt(document.getElementById('corner').value),
globallength = parseFloat(document.getElementById('length').value), globallength = parseFloat(document.getElementById('length').value),
globalsplice = parseInt(document.getElementById('splice').value), globalsplice = parseInt(document.getElementById('splice').value),
globalfilterspeckle = parseInt(document.getElementById('filterspeckle').value), globalfilterspeckle = parseInt(document.getElementById('filterspeckle').value),
globalcolorprecision = parseInt(document.getElementById('colorprecision').value), globalcolorprecision = parseInt(document.getElementById('colorprecision').value),
globallayerdifference = parseInt(document.getElementById('layerdifference').value); globallayerdifference = parseInt(document.getElementById('layerdifference').value);
document.getElementById('none').addEventListener('click', function (e) { document.getElementById('none').addEventListener('click', function (e) {
mode = 'none'; mode = 'none';
restart(); restart();
}, false); }, false);
document.getElementById('polygon').addEventListener('click', function (e) { document.getElementById('polygon').addEventListener('click', function (e) {
mode = 'polygon'; mode = 'polygon';
restart(); restart();
}, false); }, false);
document.getElementById('spline').addEventListener('click', function (e) { document.getElementById('spline').addEventListener('click', function (e) {
mode = 'spline'; mode = 'spline';
restart(); restart();
}, false); }, false);
document.getElementById('clustering-binary').addEventListener('click', function (e) { document.getElementById('clustering-binary').addEventListener('click', function (e) {
clustering_mode = 'binary'; clustering_mode = 'binary';
restart(); restart();
}, false); }, false);
document.getElementById('clustering-color').addEventListener('click', function (e) { document.getElementById('clustering-color').addEventListener('click', function (e) {
clustering_mode = 'color'; clustering_mode = 'color';
restart(); restart();
}, false); }, false);
document.getElementById('filterspeckle').addEventListener('change', function (e) { document.getElementById('filterspeckle').addEventListener('change', function (e) {
globalfilterspeckle = parseInt(this.value); globalfilterspeckle = parseInt(this.value);
document.getElementById('filterspecklevalue').innerHTML = this.value; document.getElementById('filterspecklevalue').innerHTML = this.value;
restart(); restart();
}); });
document.getElementById('colorprecision').addEventListener('change', function (e) { document.getElementById('colorprecision').addEventListener('change', function (e) {
globalcolorprecision = parseInt(this.value); globalcolorprecision = parseInt(this.value);
document.getElementById('colorprecisionvalue').innerHTML = this.value; document.getElementById('colorprecisionvalue').innerHTML = this.value;
restart(); restart();
}); });
document.getElementById('layerdifference').addEventListener('change', function (e) { document.getElementById('layerdifference').addEventListener('change', function (e) {
globallayerdifference = parseInt(this.value); globallayerdifference = parseInt(this.value);
document.getElementById('layerdifferencevalue').innerHTML = this.value; document.getElementById('layerdifferencevalue').innerHTML = this.value;
restart(); restart();
}); });
document.getElementById('corner').addEventListener('change', function (e) { document.getElementById('corner').addEventListener('change', function (e) {
globalcorner = parseInt(this.value); globalcorner = parseInt(this.value);
document.getElementById('cornervalue').innerHTML = this.value; document.getElementById('cornervalue').innerHTML = this.value;
restart(); restart();
}); });
document.getElementById('length').addEventListener('change', function (e) { document.getElementById('length').addEventListener('change', function (e) {
globallength = parseFloat(this.value); globallength = parseFloat(this.value);
document.getElementById('lengthvalue').innerHTML = this.value; document.getElementById('lengthvalue').innerHTML = this.value;
restart(); restart();
}); });
document.getElementById('splice').addEventListener('change', function (e) { document.getElementById('splice').addEventListener('change', function (e) {
globalsplice = parseInt(this.value); globalsplice = parseInt(this.value);
document.getElementById('splicevalue').innerHTML = this.value; document.getElementById('splicevalue').innerHTML = this.value;
restart(); restart();
}); });
function setSourceAndRestart(source) { function setSourceAndRestart(source) {
img.src = source instanceof File ? URL.createObjectURL(source) : source; img.src = source instanceof File ? URL.createObjectURL(source) : source;
img.onload = function () { img.onload = function () {
svg.setAttribute('viewBox', `0 0 ${img.naturalWidth} ${img.naturalHeight}`); svg.setAttribute('viewBox', `0 0 ${img.naturalWidth} ${img.naturalHeight}`);
@@ -200,9 +200,9 @@ function setSourceAndRestart(source) {
svg.style.display = 'block'; svg.style.display = 'block';
// Hide upload text // Hide upload text
droptext.style.display = 'none'; droptext.style.display = 'none';
} }
function restart() { function restart() {
document.getElementById('clustering-binary').classList.remove('selected'); document.getElementById('clustering-binary').classList.remove('selected');
document.getElementById('clustering-color').classList.remove('selected'); document.getElementById('clustering-color').classList.remove('selected');
document.getElementById('clustering-' + clustering_mode).classList.add('selected'); document.getElementById('clustering-' + clustering_mode).classList.add('selected');
@@ -246,13 +246,13 @@ function restart() {
progress.value = 0; progress.value = 0;
progressregion.style.display = 'block'; progressregion.style.display = 'block';
runner.run(); runner.run();
} }
function deg2rad(deg) { function deg2rad(deg) {
return deg/180*3.141592654; return deg/180*3.141592654;
} }
class ConverterRunner { class ConverterRunner {
constructor (converter_params) { constructor (converter_params) {
this.converter = this.converter =
clustering_mode == 'color' ? clustering_mode == 'color' ?
@@ -291,4 +291,4 @@ class ConverterRunner {
stop () { stop () {
this.stopped = true; this.stopped = true;
} }
} }