Hallo liebes Forum,
ich arbeite momentan an einem Projekt, wo ich mit dem Javascript-Port von Potrace
arbeite.
Ich habe vor eine Live-Preview/Render Funktion zu implementieren. Es soll für verschiedene Variablen Input-Range Elemente verwendet werden, das SVG nach der Änderung des Wertes/onchange neuberechnet werden.
Nun bin ich soweit, dass ich die Verbindung zwischen Input-Range und der Variable hergestellt habe - wenn ich die Input Value von z.B. 20 vorgebe, wird das Bild mit diesem Wert gerechnet. Bei Änderung des Wertes tut sich jedoch noch nichts. Was mache ich falsch? Wie kann ich dieses Problem lösen?
Und noch meine Verknüpfung zum genannten Wert aus der potrace.js
Ich freue mich über jegliche Hilfe.
Gruß
lukmorf
ich arbeite momentan an einem Projekt, wo ich mit dem Javascript-Port von Potrace
HTML:
http://kilobtye.github.io/potrace/
Ich habe vor eine Live-Preview/Render Funktion zu implementieren. Es soll für verschiedene Variablen Input-Range Elemente verwendet werden, das SVG nach der Änderung des Wertes/onchange neuberechnet werden.
Nun bin ich soweit, dass ich die Verbindung zwischen Input-Range und der Variable hergestellt habe - wenn ich die Input Value von z.B. 20 vorgebe, wird das Bild mit diesem Wert gerechnet. Bei Änderung des Wertes tut sich jedoch noch nichts. Was mache ich falsch? Wie kann ich dieses Problem lösen?
HTML:
<input id="tolerance" value="4" min="0" max="30" step="0.5" type="range" onchange="rerender();" >
<div id="svgdiv"> </div>
Code:
//Funktion zur direkten Berechnung bei Image-Upload
function handleFiles(files) {
Potrace.loadImageFromFile(files[0]);
Potrace.process(function(){
displaySVG(1);
});
}
//Anzeigen der fertig berechneten SVG
function displaySVG(size, type){
var svgdiv = document.getElementById('svgdiv');
svgdiv.style.display = 'inline-block';
svgdiv.innerHTML = "<p>Result:</p>" + Potrace.getSVG(size, type);
}
//Meine Funktion zur Neuberechnung des Bildes
function rerender(){
Potrace.loadImageFromFile(files[0]);
Potrace.process(function(){
displaySVG(1);
});
}
Und noch meine Verknüpfung zum genannten Wert aus der potrace.js
Code:
turdsize: parseInt(document.getElementById("tolerance").value),
Gruß
lukmorf