[英]Save a HTML5 canvas to a folder on a server
I wrote a small JavaScript-based paint program using a HTML5 canvas. 我使用HTML5画布编写了一个基于JavaScript的小型绘画程序。 What I'm trying to implement now is the ability to save the drawing to a folder on a server.
我现在要实现的是将图形保存到服务器上的文件夹的功能。 The filename should be something like this: "artist"+"title"+"date" (I'm using prompts to get the artist name and the title).
文件名应该是这样的:“ artist” +“ title” +“ date”(我正在使用提示来获取艺术家的名称和标题)。 How can I do this?
我怎样才能做到这一点? I know I have to do something like this:
我知道我必须做这样的事情:
var dataURL = canvas.toDataURL();
and then use Ajax to call a PHP script. 然后使用Ajax调用PHP脚本。 For example:
例如:
$.ajax({
type: "POST",
url: "saveImg.php",
data: {
imgBase64: dataURL
}
}).done(function(o) {
console.log('saved');
});
But how do I get the artist name and the title to the PHP script? 但是,如何获得艺术家名称和PHP脚本的标题? As far as I know the file name is defined inside the PHP script, right?
据我所知,文件名是在PHP脚本中定义的,对吗?
Greetings 问候
This could be accomplished in the following way ... 这可以通过以下方式完成...
ᴊᴀᴠᴀꜱᴄʀɪᴘᴛ ᴊᴀᴠᴀꜱᴄʀɪᴘᴛ
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.