将HTML5画布保存到服务器上的文件夹
问题描述:
我使用HTML5画布编写了一个基于JavaScript的小型绘画程序。我现在想要实现的是将绘图保存到服务器上的文件夹的功能。文件名应该是这样的:“艺术家”+“标题”+“日期”(我使用提示获取艺术家姓名和标题)。 我该怎么做?我知道我必须这样做:将HTML5画布保存到服务器上的文件夹
var dataURL = canvas.toDataURL();
然后使用Ajax调用PHP脚本。例如:
$.ajax({
type: "POST",
url: "saveImg.php",
data: {
imgBase64: dataURL
}
}).done(function(o) {
console.log('saved');
});
但是,如何获取艺术家姓名和PHP脚本的标题?据我所知,文件名是在PHP脚本中定义的,对吗?
问候
答
这可以通过以下方式来完成...
ᴊᴀᴠᴀꜱᴄʀɪᴘᴛ
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);
添加更多PROPERT数据对象并赋值 – charlietfl
'data:{ imgBase64:dataURL, artist:'artist name' } –