Bild (Canvas-tag) als Download anbieten

Roland · 2. August 2012

Der Titel verrät es ja schon, ich möchte ein Bild auf den PC speichern.
Natürlich kann der Nutzer auch auf das Bild rechts-klicken und auf "speichern unter" klicken , dass möchte ich im aber nicht zumuten^^ (und mir fällt auf das kann nur der Firefox)

am liebsten wäre es wir mit reinen Javascript das Bild zu speichern.

hier habe ich schon nen download butten,nur serverseitig das problem gelöst das Bild wird doch im Browser generiert das muss doch auch ohne das php gehen
http://test.ds-pro.de/bild/

Roland · 2. August 2012

mm okay habe jetzt eine Lösung serverseitig.

HTML

<form action="download.php" method="post" enctype="text/html"><input type="text" name="dataurl"></form>  




<canvas id="ziel" width="960" height="530"></canvas>




<span onclick='document.getElementsByName("dataurl")[0].value = document.getElementById("ziel").toDataURL();document.getElementsByTagName("form")[0].submit();'>Download</span>

Alles anzeigen

hier die dazugehörige download.php

PHP

<?php
header('Content-type: image/png');
header('Content-Disposition: attachment; filename="downloadbild.png"');




$img = $_POST['dataurl'];
$img = str_replace('data:image/png;base64,', '', $img);
//$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
echo $data;




?>

Alles anzeigen

Bild (Canvas-tag) als Download anbieten

Jetzt mitmachen!

Teilen