将 HTML5 画布作为图像保存到服务器答案

【问题标题】：Saving a HTML5 canvas as an image to the server将 HTML5 画布作为图像保存到服务器
【发布时间】：2014-08-11 04:35:08
【问题描述】：

我正在尝试将我的画布作为图像保存到我的服务器，但它不起作用。

javascript

var data = canvas.toDataURL();
var picture = document.getElementById("my-picture");

PHP

$canvas = base64_decode(str_replace('data:image/png;base64,', '' , $value['picture']));
file_put_contents('my_custom_path/my_custom_filename.png', $canvas);

这段代码是给我的，但我不确定如何实现 php 部分。

【问题讨论】：

这是 Stackoverflow 上经常被问到和回答的问题。您可以尝试搜索（！）。这是一个例子：stackoverflow.com/questions/24575090/…
问的目的是让我参与讨论，因为我没有足够的声望参与其他帖子。声誉系统绝对没有意义，特别是如果你要标记我所有的帖子。您应该考虑删除评论的声誉要求。 @markE
我没有标记您的帖子或对您投反对票。我只是建议你会发现这个问题经常被成功回答，所以你可以试试右上角的搜索框。 ;-)
我明白，但我已经寻找了这个问题，我找到了你所指的帖子。但我是 javascript/php 的新手，其他帖子的答案对我来说不够详细。当然，我只会在帖子上添加评论，但由于我缺乏声誉，我无法添加评论。 @markE

标签： javascript php html canvas

【解决方案1】：

假设您的 Javascript/HTML 是正确的（确保您获取正确的 POST 值）请尝试以下 PHP 代码：

$data = str_replace('data:image/png;base64,', '', $data);
$data = base64_decode( str_replace(' ', '+', $data) );
$success = file_put_contents('my_custom_path/my_custom_filename.png', $data);

还要确保您放置文件的目录是可访问的。

【讨论】：

它正在创建一个文件，但大小为0，我无法打开它。
如果文件大小为 0，我只能假设它没有正确发布数据。在您的帖子中显示$value['picture']，您确定不应该是$value['data'] 吗？
当我使用你的代码时，我得到一个空白文件图像
您确定运行 PHP 的用户对您要写入文件的目录具有写入权限吗？
我不知道，但我想我会假设他们不知道。我从未使用过 PHP，所以我真的不知道如何授予写权限。