<img> generiert über canvg zum Download anbieten

[Baba]

Liebe Helfer,

Ich möchte ein JS-generiertes Image zum Download anbieten. Hintergund ist folgender: mit einem JS-Framework generiere ich dynamische/interaktive Charts. Nun endlich bietet sich mit canvg die Möglichkeit, flache Bilder (png) aus den canvas-Elementen generieren zu lassen, um sie dem User zum Download anzubieten. Hier ein passendes Beispiel. Dieser Fall, dass das img im DOM angehängt wird funktioniert auch bei mir. Nun möchte ich aber das Bild direkt zum Download anbieten, sprich: der User klickt "Export" und ein Downlaoddialog erscheint.

Während des Schreibens dieses Posts habe ich, wie so oft, eine Lösung gefunden, die mich allerdings nicht ganz glücklich macht.

Mit jquery.generateFile hänge ich einen <iframe> ans DOM an von dem aus ein Request mit 50msek Verzögerung auf eine download.php gestartet wird, welche aus dem POST die Daten für das Bild ausliest.

download.php

if(empty($_POST['filename']) || empty($_POST['content'])){  
	    exit;  
	}  
  
// Sanitizing the filename:  
$filename = preg_replace('/[^a-z0-9\-\_\.]/i','',$_POST['filename']);  
  
// Outputting headers:  
header("Cache-Control: ");  
header("Content-type: image/png");  
header('Content-Disposition: attachment; filename="'.$filename.'"');  
  
  
$content = $_POST["content"];  
$content = str_replace("data:image/png;base64,", "", $content);  
  
echo base64_decode($content);  
exit;

Geht es wirklich nicht einfacher? Bin an jeder Lösung interessiert.

Flash: fällt aus.
dataURI: uriContent = "data:application/octet-stream," + encodeURIComponent(content); fällt weg, weil man da keinen DAteinamen vorgeben kann.

Vielen Dank im voraus.

Cheers,
Baba

[ChrisB]

Hi,

dataURI: uriContent = "data:application/octet-stream," + encodeURIComponent(content); fällt weg, weil man da keinen DAteinamen vorgeben kann.

Ich weiß nicht für alle aktuellen Browser, welchen Dateinamen sie vorschlagen – aber ist es nicht großteils so, dass sie den Namen des aktuell geladenen Dokumentes als Vorgabe nutzen in solchen Fällen?

Falls ja, könntest du versuchen, diesen mit der HTML5 History API selber zu setzen, bevor du den Download mittels Data-URI anstößt.

MfG ChrisB

[Baba]

Findest Du diesen Weg generell eleganter? Ich frage, weil ich diese Frage nicht zu beantworten vermag.

Cheers,
Baba