Senden Leinwand Bild-und Formular-Daten zum server zu benennen png

Hallo ich brauche, um die Daten des Formulars eingereicht werden, zusammen mit den canvas-Bild. Verwenden Sie dann das Formular Daten zu dem Namen speichern der Datei auf dem server. Ich bin nur der Griff zu bekommen mit PHP, so dass jede Hilfe wäre toll.

Dies ist mein Beispiel arbeiten, die speichern die gleich benannte Datei auf den server.

HTML

 <form action="name.php" method="post">
        Name: <input type="text" name="fname">
        Age: <input type="text" name="age">
        <input type="button" onclick="saveImage();formSubmit();" value="Submit form">
 </form>

JS 

function saveImage(){
var xmlhttp;
xmlhttp=((window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"));
xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        //do something with the response
    }
}
xmlhttp.open("POST","upload.php",true);
var oldCanvas = document.getElementById('colors_sketch').toDataURL("image/png");
var img = new Image();
img.src = oldCanvas;
xmlhttp.setRequestHeader("Content-type", "application/upload")
xmlhttp.send(oldCanvas);

}

PHP

$data = file_get_contents('php://input');

$canvasImg = imagecreatefrompng($data);
$width  = imagesx($canvasImg);
$height = imagesy($canvasImg);

$outImg = imagecreatetruecolor($width, $height);
$color = imagecolorallocatealpha($outImg, 255, 255, 255, 127);
imagefill($outImg, 0, 0, $color);
imagecopy($outImg, $canvasImg, 0, 0, 0, 0, $width, $height);

imagepng($outImg, 'test.png');
  • Hat jemand noch andere Ideen, wie sonst sollte ich das tun?
InformationsquelleAutor databot | 2013-04-22
  1. 2

    Hier sind die Schritte zum senden Ihrer form und Bild upload.php

    Erstellen Sie zunächst eine Daten-Paket zu senden, dass Ihr serialisiert, Bild und form. Hier verwende ich jquery serialisiert form (oder serialisieren es sich ohne jquery).

    //serialize and concatenate both form and canvas image
var package=$("form").serialize() + "&imageDataURL="+canvas.toDataURL();

    Dann POSTE es mittels AJAX an dein PHP-server:

    //ajax it
postImagePlusForm();

function postImagePlusForm(){
    $.ajax({  
        type: "POST",  
        url: "upload.php",  
        data: package,  
        success: function(value) {  
            //...we have success!
        }
    });
}

    Und schließlich fangen und verarbeiten es in php:

    <?php 
if ( isset($_POST["imageDataURL"]) && !empty($_POST["imageDataURL"]) ) {    
    //create $dataURL
    $dataURL = $_POST["imageDataURL"];  
    //Extract base64 data
    //we have an unneeded header, zap it
    $parts = explode(',', $dataURL);  
    $data = $parts[1];  
    //Decode
    $data = base64_decode($data);  
    //Save
    $fp = fopen('newImage.png', 'w');  
    fwrite($fp, $data);  
    fclose($fp); 
}
if ( isset($_POST["formData"]) && !empty($_POST["formData"]) ) {    
    $formData = $_POST['formData'];
    foreach ($formValue as $x) {
        //do whatever you need to do with each form value ($x)
    }
}
    • Ich habe getan, was Ihr hier erwähnt, aber kann nicht scheinen, um ein Ergebnis zu erhalten..
    • Ok, versuchen Sie diese Variante, die einfach verkettet sowohl die form-und Bild-Daten-in-1-string: var-Paket=$("form").serialize() + "&imageDataURL="+Leinwand.toDataURL();
    InformationsquelleAutor markE
  2. 0

    Diese Frage wurde bereits unzählige Male auf SO.

    Ich bereits beantwortet die gleiche Frage hier:
    https://stackoverflow.com/a/13198699/1090562

    Kurz, dies kann erreicht werden mit dieser, für mehr details, Lesen Sie den link

    $.ajax({
  type: "POST",
  url: "script.php",
  data: { 
     imgBase64: canvas.toDataURL();
  }
}).done(function(o) {
  console.log('saved');
});
    • Als eine Drehung auf diese oft gestellte Frage, OP will bundle-serialisierter Form mit der AJAX gesendet wird. Dennoch, ich Stimme zu-gestellt und beantwortet werden können mal.
    • Wie bekomme ich die Daten in das Formular, um den Namen der Datei, die erstellt wird?
    • Ich folgte Ihr auf Infos von der anderen Seite, aber ich bin nur eine wirre png?
    InformationsquelleAutor Salvador Dali
Schreibe einen Kommentar