javascript - 如何使用 dataURL 在服务器上创建图像文件？

Question

在我的应用程序中，我使用了用户可以在其上绘制图像的画布。在保存按钮上，我从画布中获取 dataURL。现在我想将用户创建的图像保存在服务器（node.js）上。我已阅读Node 文件系统文档，但我不确定我可以/应该使用什么！另外到目前为止，我只使用表单将数据发布到服务器，现在我需要在单击保存按钮时发布数据，我该怎么办？

Answer 1

所以答案分为两部分，

客户端行为和服务器行为。这里缺少很多原始信息。

首先，我们假设您有一种机制，可以在将内容转换为数据存储中的图像“文件”或二进制内容（或 svg 的 xml 等）时以所需的格式获取内容的原始流。您将使用标准 XmlHttpRequest 将内容发布到 url 的原始流内容。在 node.js 进程中，您需要一个路由和一个函数来“捕捉”流式传输的内容并将其保存在您的存储机制中（文件、db 作为 blob、导出到外部服务等）

因此，当您询问客户端如何使用 XmlHttpRequest（dojo.xhr、jQuery.ajax 等）将原始内容作为帖子的“正文”以编程方式发布到 url 时。将函数绑定到 dom 元素的 onClick 方法，该方法获取图像内容并将其发布到服务器 url。

jQuery('#postDiv').click(function() {
    jQuery.ajax({
       type : 'POST',
       url : '/myapp/image/<id>',
       data : someComponentInMyPage.getImageContent(),
       success : function() { // show the user it worked },
       datatype : 'image/png' // or whatever format is coming out
    });
 });

在服务器上，获取输入流并将其写入文件，这将取决于您在节点端使用的框架/模块。