Speichern eines HTML5-Canvas in einem Ordner auf einem Server

Question

Ich habe ein kleines JavaScript-basiertes Malprogramm mit einem HTML5-Canvas geschrieben. Was ich jetzt implementieren möchte, ist die Möglichkeit, die Zeichnung in einem Ordner auf einem Server zu speichern. Der Dateiname sollte etwa so aussehen: "Künstler" + "Titel" + "Datum" (Ich verwende Eingabeaufforderungen, um den Künstlernamen und den Titel zu erhalten). Wie kann ich das tun? Ich weiß, ich muss etwas tun:

var dataURL = canvas.toDataURL(); 

und dann Ajax verwenden, um ein PHP-Skript aufzurufen. Zum Beispiel:

$.ajax({ 
    type: "POST", 
    url: "saveImg.php", 
    data: { 
     imgBase64: dataURL 
    } 
}).done(function(o) { 
console.log('saved'); 
}); 

Aber wie bekomme ich den Künstlernamen und den Titel zum PHP-Skript? Soweit ich weiß, ist der Dateiname innerhalb des PHP-Skripts definiert, oder?

Grüße

Answer 1

Diese auf folgende Weise erreicht werden könnte ...

ᴊᴀᴠᴀꜱᴄʀɪᴘᴛ

var dataURL = canvas.toDataURL(); 
$.post('saveImg.php', { 
    imgBase64: dataURL, 
    artist: 'ramy', 
    title: 'paint', 
    date: new Date().toDateString() 
}, function(o) { 
    console.log('saved'); 
}); 

ᴘʜᴘ

<?php 
$img = $_POST['imgBase64']; 
$artist = $_POST['artist']; 
$title = $_POST['title']; 
$date = $_POST['date']; 
$img = str_replace('data:image/png;base64,', '', $img); 
$img = str_replace(' ', '+', $img); 
$fileData = base64_decode($img); 
$fileName = 'images/'.$artist.'_'.$title.'_'.$date.'.png'; 
file_put_contents($fileName, $fileData);