如何使用 AJAX 成功将 HTML5 Canvas 图像保存到服务器？

将 HTML5 Canvas 保存为服务器上的图像

在为用户保存生成艺术的过程中，您遇到了保存方面的挑战图像从画布到服务器。本文解决了您的具体问题并提供了解决方案。

在之前教程奠定的基础上，您尝试使用 XMLHttpRequest 对象保存画布数据。创建图像文件时，它仍然是空的且无法读取。

深入研究内容类型

解开这个谜团的关键在于 Content-Type 标头您在 AJAX 请求期间设置。最初设置为“application/upload”，此标头似乎合乎逻辑，但并未得到 Web 服务器的广泛支持。

解决方案：拥抱 Application/x-www-form-urlencoded

解决方案是将 Content-Type 标头更改为“application/x-www-form-urlencoded”。此更改符合向服务器提交表单数据的公认标准，使您的画布数据能够成功传输。

代码修改

要实施此解决方案，请修改您的 AJAX 请求如下：

ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

已验证结果

合并此修改后，您确认现在正在以非零大小创建图像文件。然而，它们仍然无法作为有效图像读取和查看。

进一步探索

这给您留下了一个挥之不去的谜题需要解决。在传输画布数据时，图像数据的编码或格式可能存在差异。需要进一步调查以确定问题的确切性质并制定永久解决方案。

以上是如何使用 AJAX 成功将 HTML5 Canvas 图像保存到服务器？的详细内容。更多信息请关注PHP中文网其他相关文章！