javascript - 将 HTML5 Canvas 保存到服务器上的文件夹中

Question

我使用 HTML5 Canvas 编写了一个基于 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);