1

有一个画布，上面有图片和一个按钮。用户单击一个按钮，它被转换为 img 并且该图像form通过 PHP 发送到服务器并上传到服务器，我试图写一些东西，但这一个超出了我的能力。

怎么做？有没有更简单的方法来解决这个问题？

<canvas id="canvas" width="400px" height="400px">HERE USER DRAW< /canvas>
<button onclick="to_image()">Draw to Image< /button>

这里是 to_image()：

var canvas = document.getElementById("canvas");
document.getElementById("theimage").src = canvas.toDataURL();
var data = canvas.toDataURL('image/png');

我试图改变这样的按钮：

<button type="submit" onclick="to_image()">Save< /button>

并创建隐藏输入，将图像放在那里：

<input type="file" name="file" id="file" style="visibility:hidden"/>

最后改变 to_image() 像：

document.getElementById("file").src = data;

仍然没有任何反应，我是 javascript 和 php 的新手，所以显示代码有点尴尬

4

1 回答 1

1

您可以使用 Javascript 获取画布数据并将其转换为 URL（有关 toDataURL 的更多信息）：

var drawing = document.getElementById('canvas-id').toDataURL('image/png');

然后，您可以通过 AJAX 调用将此 URL 提供给服务器，并从那里对其进行处理。这将是 base64 编码的，所以你必须这样做base64_decode（文档），然后你会得到一个图像 blob，你可以用你的 PHP 保存它。

您必须使用 POST 提交数据，因为 GET 在 IE 和 Chrome 中有长度限制。我在这里找到了一个例子，有人用完整的代码示例做了非常相似的事情，以防你被它卡住。

于 2013-05-07T16:39:10.873 回答