將HTML5畫布保存到服務器上的文件夾

Question

我使用HTML5畫布編寫了一個基於JavaScript的小型繪畫程序。我現在想要實現的是將繪圖保存到服務器上的文件夾的功能。文件名應該是這樣的：「藝術家」+「標題」+「日期」（我使用提示獲取藝術家姓名和標題）。 我該怎麼做？我知道我必須這樣做：

var dataURL = canvas.toDataURL(); 

然後使用Ajax調用PHP腳本。例如：

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

但是，如何獲取藝術家姓名和PHP腳本的標題？據我所知，文件名是在PHP腳本中定義的，對嗎？

問候

Answer 1

這可以通過以下方式來完成...

ᴊᴀᴠᴀꜱᴄʀɪᴘᴛ

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);