toDataURL() und Canvas

[berliner_baer]

Ich möchte gern eine mit canvas erzeugte und bereits angezeigte Grafik zusätzlich mit einer URL anbieten (letztlich ein Link, der beim Klicken auf die Grafik zur größeren Version führt). Ich möchte nicht umständlich mit windows/popups arbeiten, sondern die reine URL haben. Das Vorschaubild funktioniert problemlos und wird derzeit wie folgt erzeugt:

<canvas id="image"></canvas>

var ct1 = document.getElementById("image").getContext("2d");
ct1.canvas.width = document.getElementById("image").offsetWidth;
ct1.canvas.height = document.getElementById("image").offsetHeight;
var Chart1  = new Chart(ct1).Line(lineChartData1,options);

Das Canvas-Element ist zusätzlich in einem DIV-Container untergebacht, weshalb hier nach offsetWidth und offsetHeight gefragt wird. Eine festgesetzte Grafik ist's wegen des Responsive-Designs nicht; es passt sich hervorragend der Größe an. Die entscheidende Generierung der Grafik erfolgt schließlich mit new Chart(ct1).Line(lineChartData1,options);. Wie auch immer, das läuft einwandfrei.

Um eine URL aus einem Canvas-Element zu erzeugen, gibt es toDataURL(), doch damit habe ich Probleme:

var url = document.getElementById("image").toDataURL();
document.write(url);

Das aufgeführte Beispiel erzeugt eine URL und gibt sie beispielhaft als Text aus. Das funktioniert auch - zumindest teilweise: 2 arge Probleme habe ich damit:

1. Die URL wird zwar angezeigt (auch die grafik mittels popup), enthält aber nichts, nur eine freie Fläche und nicht das eigentliche Bild.
2. Ich möchte dem Canvas natürlich noch die Option geben, eine höhere Auflösung generieren zu lassen, wie ich es mit ct1.canvas.width und ct1.canvas.height beim eigentlichen Bild schon erledigt habe.

Also, was ist falsch im Code?

 

[kkapsner]

Was macht denn new Chart() genau? Hast du einen Testlink, wo wir uns das ansehen können?

Aber eine URL öffnet man mit window.open() und nicht mit document.write() (was ich generell nicht empfehle, da es stablerer/sichere Wege gibt, Inhalt auf der Seite dynamisch anzeigen zu lassen).

Außerdem scheinst du ja irgendein Diagramm anzeigen zu wollen. Dafür sollte auch ein vektrobasiertes Bildformat besser geeignet zu sein. Schau' dich doch mal nach etwas um, das dann SVGs ausgibt. Da hast du dann die komplette Problematik mit der Auflösung gar nicht mehr.

 

[berliner_baer]

Ich denke, ich habe das Problem gelöst. Offensichtlich wird das Bild erst gerendert, wenn die Animation fertig ist. Deswegen ist das Bild vorher leer bzw. transparent.

Wie verwenden für Chart.js erstmal onAnimationComplete in den Options:

var options = {	
onAnimationComplete: done
}

und anschließend für die Ausgabe eine kleine Funktion:

function done() {
console.log('done');
var url=document.getElementById("canvas").toDataURL();
document.getElementById("canvas_link").href=url;
}

Nun wartet toDataURL(), bis alles fertig gerendert ist und übergibt dann erst die URL. Fertig.