Canvas2image Ajax

[Saschav2411]

Hallo,

ich bin gerade dabei Bilder in ein Canvas zu intergrieren und es dann als png auf meinem Server zu speichern

Meine aktuelle Css - Javascript und Canvasausgabe

CSS

  <style type="text/css">
      
      div#canvas { 
          height:500px; 
          width:500px;
          }

   </script>

Script

   <script type="text/javascript"> 


$('#canvas').html2canvas({
    onrendered : function(canvas) {
    var img = canvas.toDataURL();
    
            }
        });

</script>

Canvas erzeugen

<div id="canvas">

<table class="rundeEcken" background="http://www.hd-wallpaper-area.com/wallpaper/thumbnails/X%20MAS%20607_770x0.jpg">
<tr>
<td class="rundeEcken" width="50px" height="50px"><?php echo "<img class='rundeEcken1' src='http://graph.facebook.com/" . $friends[data][1][id]  ."/picture'><br>";?></td>
</tr>
</table>

</div>

Jetzt muss ich die DataURL, die in einem Base64 String ausgegeben wird per Ajax zrückkonventieren.

Hab auf stackoverflow auch viele Beispiele gefunden, allerdings hab ich mich jetzt eine woche ausgetobt und es einfach nicht hinbekommen es alles richtig zusammen zusetzen. vielleicht kann mir ja jemand etwas unter die Arme greifen

Das müsste die Ajax-Funktion sein um den Base64-String

function saveImage() { 
var canvasData = canvas.toDataURL("image/png"); 
var ajax = new XMLHttpRequest(); 
ajax.open("POST",'testSave.php',false); 
ajax.onreadystatechange = function() { console.log(ajax.responseText);
 } ajax.setRequestHeader('Content-Type', 'application/upload');
 ajax.send("imgData="+canvasData); }

Und das hier der Code zum convertieren

function base64_to_jpeg( $base64_string, $output_file ) { $ifp = fopen( $output_file, "wb" ); 
fwrite( $ifp, base64_decode( $base64_string) ); 
fclose( $ifp ); 
return( $output_file );
 } 
$image = base64_to_jpeg( $my_base64_string, 'tmp.jpg' );

save.php

<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
// Get the data
$imageData=$GLOBALS['HTTP_RAW_POST_DATA'];

// Remove the headers (data:,) part.
// A real application should use them according to needs such as to check image type
$filteredData=substr($imageData, strpos($imageData, ",")+1);

// Need to decode before saving since the data we received is already base64 encoded
$unencodedData=base64_decode($filteredData);

//echo "unencodedData".$unencodedData;

// Save file. This example uses a hard coded filename for testing,
// but a real application can specify filename in POST variable
$fp = fopen( ‘test.png’, ‘wb’ );
fwrite( $fp, $unencodedData);
fclose( $fp );
}
?>

Der Ajax Code scheint die Datei ja zu konvertieren und gleichzeitig zu speichern. Stimmt das?
Benötige ich dann überhaupt die save.php****

Wäre nett wenn mir jemand beim zusammenfügen helfen könnte dass es funktioniert,
sodass ich mal ein komplettes Beispiel habe, an dem ich es lernen kann.

Besten Dank und schönes Wochenende
Sascha

http://permadi.com/blog/2010/10/html5-saving-canvas-image-data-using-php-and-ajax/

http://www.nihilogic.dk/labs/canvas2image/

 

[Quaese]

Hi,

schau mal hier - da hatte ich mal ein Beispiel zum Speichern eines Bildes aus einem Canvas vorgestellt. Das zugehörige PHP-Fragment befindet sich am Ende des Dokuments.

Vielleicht hilft dir das weiter.

Ciao
Quaese

 

[Saschav2411]

Ah okay das Tutorial is von dir hab mich hier nämlich reingelesen. Sehr gut und verständlich

Allerdings werden die Funktionen ja alle im Script aufgerufen bzw verarbeitet,

so wie hier auch http://mitgux.com/demo/send-canvas-to-server-as-file-using-ajax/index.php


die ganzen Codes zwischen dem Canvas Tag werden ja nur aufgerufen, wenn der Browser dies nicht unterstüzt.

Weißt du vielleicht wie ich diese Tabelle als div in das canvas einbauen kann und es dann zu nem base64 string conventiere?

<table class="rundeEcken" background="http://www.hd-wallpaper-area.com/wallpaper/thumbnails/X%20MAS%20607_770x0.jpg">
<tr>
<td class="rundeEcken" width="50px" height="50px"><?php echo "<img class='rundeEcken1' src='http://graph.facebook.com/" . $friends[data][1][id]  ."/picture'><br>";?></td>
</tr>
</table>

Vielen Dank

 

[Quaese]

Hi,

du kannst doch mit Hilfe von html2canvas das Element in einen Canvas rendern lassen. In der onrendered-Methode rufst du einfach eine Funktion auf, in der du den Ajax-Request durchführst. Auf dem Server wird dann gespeichert und der Dateiname des Bildes zurückgegeben.

Beispiel:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/html2canvas/html2canvas_0-4-1.js"></script>
<script type="text/javascript">
window.onload = function(){
    html2canvas(document.getElementById("canvas"), {
        onrendered: function(canvas) {
            var img = canvas.toDataURL();

            saveImage(canvas);
        }
    });
}

function saveImage(canvas) {
    var canvasData = canvas.toDataURL("image/png"),
        ajax = new XMLHttpRequest();

    ajax.open("POST",'saveImage.php',true);
    ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    ajax.onreadystatechange = function(){
        if(ajax.readyState == 4){
            if(ajax.status == 200){
                //console.log("ajax: ", ajax);
                document.getElementById('viewId').src = ajax.responseText;
            }else{
                console.log("Anfrage nicht erfolgreich!");
            }
        }
    };


    ajax.send("imgData="+encodeURIComponent(canvasData));
}
</script>

<style type="text/css">
div#canvas {
    height:500px;
    width:500px;
    background: #ff0;
    border: 3px solid #0f0;
}
</style>
</head>
<body>
<div id="canvas">
    <table class="rundeEcken" background="../bilder/xmass.jpg">
        <tr>
            <td class="rundeEcken" width="50px" height="50px"><img class="rundeEcken1" src="../bilder/baum.jpg" /><br></td>
        </tr>
    </table>
</div>

<img id="viewId" >
</body>
</html>

Und die zugehörige saveImage.php

$strJSON = rawurldecode($_REQUEST['imgData']);
list($pre, $data) = explode(",", $strJSON);

// Datei öffnen, leeren und neuen Grafik-Data-String einfügen
$hFile = fopen("test_png.png", "wb");
fwrite($hFile, base64_decode($data));
fclose($hFile);

echo("test_png.png");

Letztendlich ist es das gleiche wie auf der von mir verlinkten Seite - lediglich der Canvas aus dem die base64-Daten genommen werden ist nicht im Dokument eingebunden, sondern wird als Argument an die onrendered-Methode übergeben.

Ciao
Quaese