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