PHP Leinwand auf dem Server

Question

Ich möchte die Bilddaten aus meiner Leinwand auf dem Client und speichern Sie es als. Png auf meinem Server.

Dies ist der Code auf meinem Client, der die Bilddaten von der Leinwand bekommt und sendet sie an saveImage.php:

function render() 
    { 

     var imageData = ctx.canvas.toDataURL("image/png"); 
     var postData = "imageData="+imageData; 

     var ajax = new XMLHttpRequest(); 
     ajax.open("POST","saveImage.php",true); 
     ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
     ajax.onreadystatechange=function() 
     { 
      console.log(ajax.responseText); 
     } 

     ajax.send(postData); 
    } 

Und das ist, was saveImage.php wie folgt aussieht:

<?php 
    if(isset($_POST["imageData"])) 
    { 
     $imageEncoded = $_POST["imageData"]; 

     $imageDataExploded = explode(',', $imageEncoded); 

     $imageDecoded = base64_decode($imageDataExploded[1]); 

     $filename = time()."image".mt_rand(); 

     $file = fopen("./".$filename.".png","wb"); 
     fwrite($file, $imageDecoded); 
     fclose($file); 
     echo $filename; 
     exit(); 
    } 
?> 

Der Code funktioniert eigentlich gut, mein Problem ist nur, dass die Bilder, die erstellt werden, in irgendeiner Weise fehlerhaft sind. Wenn ich versuche, einen zu öffnen, sagt Windows, dass es mir das Bild nicht zeigen kann, weil es das Format nicht unterstützt? obwohl es ein .png?

was mache ich hier falsch?

Answer 1

Sie sollten mit encodeURIComponent() Ihre Daten werden codiert, bevor es in POST-Daten einschließlich .

Sie sollten auch ein Framework wie jQuery verwenden, um Browserunterschiede zu berücksichtigen. Ich garantiere, dass der Code nicht in allen Browsern gleich funktioniert.

Auf der PHP, versuchen Sie in file_put_contents() zum Schreiben von Daten zu suchen. Viel schneller zu tippen!

Answer 2

Haben Sie überprüft, was tatsächlich über HTTP gesendet wird? $ ImageEncoded beginnt wahrscheinlich mit Daten: image/jpeg; base64, xxxxx

Streifen alles bis zum Komma nach base64:

https://stackoverflow.com/a/15153931/3766670