Callback eindeutiger Dateiname mit jquery php

Question

Ich benutze html2canvas und Canvas2Image, um ein PNG-Bild aus Canvas zu erstellen und es auf dem Server mit einem eindeutigen Dateinamen zu speichern.

Ich würde gerne wissen, wie Sie den eindeutigen Dateinamen abrufen und anzeigen, nachdem er generiert wird.

jQuery

$(function() { 
       $("#convertcanvas").click(function() { 
        html2canvas($("#mycanvas"), { 
         onrendered: function(canvas) { 
         theCanvas = canvas; 
         document.body.appendChild(canvas); 

         // Convert for sharing   

       var img = canvas.toDataURL("image/png",1.0); 
       $.ajax({ 
        url:'save.php', 
        type:'POST', 
        data:{ 
          data:img 
         } 
       }); 

PHP

<?php 
    $data = $_POST['data']; 
    $data = substr($data,strpos($data,",")+1); 
    $data = base64_decode($data); 
    $file = 'images/myfile'.md5(uniqid()).'.png'; 
    file_put_contents($file, $data); 
?> 

Vielen Dank im Voraus für jede Hilfe.

Answer 1

Sie können den Dateinamen erhalten, indem Sie ihn in Ihrem PHP zurückgeben und ihn im AJAX mit einer succes Methode abfangen.

PHP

<?php 
    $data = $_POST['data']; 
    $data = substr($data,strpos($data,",")+1); 
    $data = base64_decode($data); 
    $filename = 'myfile'.md5(uniqid()).'.png'; // <-- Added this because you probably don't want to return the image folder. 
    $path = 'images/'.$filename; 
    file_put_contents($path, $data); 
    echo $filename; // <-- echo your new filename! 
?> 

jQuery

$.ajax({ 
    url:'save.php', 
    type:'POST', 
    data:{ 
     data:img 
    }, 
    success: function(data) { 
     alert(data); // <-- here is your filename 
     handleData(data); 
    } 
}); 

Answer 2

Sie einfach den Dateinamen innerhalb eines Arrays zurückgeben kann und senden Sie es als JSON mit json_encode.

PHP

<?php 
    $data = $_POST['data']; 
    $data = substr($data,strpos($data,",")+1); 
    $data = base64_decode($data); 
    $file = 'images/myfile'.md5(uniqid()).'.png'; 
    file_put_contents($file, $data); 
    echo json_encode(array('filename' => $file)); 
?> 

Und in Ihrem Skript können Sie JSON-Daten zu erwarten, indem die 'datatype' Eigenschaft auf "json" angeben. Dann können Sie die .done() Funktion verwenden, um alles, was Sie mit den zurückgegebenen Daten möchten, zum Beispiel Konsole Protokollierung es:

jQuery

var img = canvas.toDataURL("image/png",1.0); 
    $.ajax({ 
     url:'save.php', 
     type:'POST', 
     dataType: 'json', 
     data:{ 
      data:img 
     } 
    }).done(function(data){ 
     console.log(data); 
    });