nicht angemeldet
Sorry, wenn ich das Forum nicht so bedient habe, wie es gewünscht wird. Die Benutzung ist zum Teil nicht selbsterklärend. Ich bleibe jetzt also bei diesem thread und versuche mal, die Fragen hier zusammenhängend neu zu stellen. Der neuestes Stand ist jetzt, dass ich Bilddaten vom Server hole, die in ein canvas- Element kopiert werden sollen. Der Server ist über localhost angebunden, Bandbreiten sollten also kein Thema sein. Ich möchte aus Kompatibilitätsgründen so wenig komplexe Formate benutzen wie möglich, deshalb präferiere ich die Lösung, direkt in den canvas zu kopieren.
<!DOCTYPE html>
<html>
<head>
<style>
table { border: 2px solid black; }
tr { border: 2px solid black; }
td {
border: 1px solid black;
vertical-align: top;
}
</style>
<style type="text/css">
body { background-color: #d8d8a8; }
mytext {;}
</style>
<script type="text/javascript">
function getnews(idname){
var myAjax = new XMLHttpRequest();
myAjax.responseType="text"
myAjax.onreadystatechange=function(){
if (myAjax.readyState==4 && myAjax.status==200){
document.getElementById(idname).innerHTML=myAjax.responseText;
}
};
myAjax.open("GET", idname, true);
myAjax.send();
}
imgData=0;
canvas=0;
canvasheight=480;
canvaswidth=640;
function render() {
var myAjax = new XMLHttpRequest();
myAjax.responseType="arraybuffer";
myAjax.onreadystatechange=function(){
if (myAjax.readyState==4 && myAjax.status==200){
if (!canvas) {
canvas=document.getElementById("canvasid");
console.log("canvasneu");
context=canvas.getContext('2d');
if (context) {
if (!imgData) {
imgData=context.getImageData(0,0,canvaswidth,canvasheight);
}
}
}
else {
responsearray=new Uint8Array(myAjax.response);
i=responsearray.length;
while (i--) imgData.data[i]=responsearray[i];
responsearray=null;
myAjax.response=null;//das ist wohl überflüssig
context.putImageData(imgData, 0, 0); //Daten ins canvas schreiben
}
}
};
myAjax.open("GET", "canvasdata", true);
myAjax.send();
}
function animate() {
render();
requestAnimationFrame(animate);
}
animate();
//Benutzung: setInterval(getnews, interval, name des id- Feldes im body) benutzen, um regelmäßig im Interval abzudaten
//im server GET- Nachricht abfangen und Inhalt mittels send zurücksenden
setInterval(getnews, 1000, "refreshdata");
setInterval(getnews, 1000, "signaturen");
getnews("prefs");
getnews("kosten");
getnews("mutabor");
</script>
</head>
<body>
<h1>Welcome to EvoProgs 12!</h1>
<p>Bad times for organisms on this planet. The age of programisms is about to come.<p/>
<table>
<tr>
<td>
<a href="ende">Progsramm beenden</a><br>
<a href="arenazeigen">Arena zeigen</a><br>
<a href="#">max</a><br>
<a href="langsam">langsam</a><br>
</td>
<td id="prefs">prefs</td>
<td id="kosten">kosten</td>
<td id="mutabor">mutabor</td>
<td rowspan="2" id="refreshdata">Daten werden vorbereitet...</>
</td>
</tr>
<tr>
<!-- td id="getarenapic" colspan =4></td -->
<td colspan = 4> <canvas id="canvasid" width=640 height=480 alt="neu canvas">
<!--td id="getarenapic" colspan =4>
<img src="bild1.bmp" alt="Grafik kann nicht angezeigt werden" / -->
<!--td colspan =4>
<img src="bild1.bmp" alt="Grafik kann nicht angezeigt werden" / -->
</td>
</tr>
<tr>
<td>
<td colspan="3" id="signaturen">signaturen</td>
</td>
<td>
bl6
</td>
</tr>
</table>
<!-- img src="/home/xharx/Dropbox/Programmieren/evsim/evoprogs1/PNG_transparency_demonstration_1.png" alt="bla" /-->
</body>
</html>
In diesem Code entsteht leider ein Memoryleak von etwa hunder megabyte pro Sekunde (großes canvas, 60 hz). Wie kann ich dieses abstellen? Ist es ok, die Daten als arraybuffer zu holen (nur dann kommt es zu dem leak). Oder besser per blob? Wie kopiere ich die Daten aus dem .response am besten in die Struktur imgData.data?
Sorry für die Doppelpostings, ich wollte nichts durcheinanderbringen.
TS
JürgenB
Gunnar Bittersmann
Tabellenkalk