将画布图像从 JavaScript 发布到 RESTful Web 服务答案

【问题标题】：POST canvas image from JavaScript to RESTful Web Services将画布图像从 JavaScript 发布到 RESTful Web 服务
【发布时间】：2020-01-09 23:10:29
【问题描述】：

我目前正在实现一个工具，它需要从 HTML JavaScript 中保存画布图像并使用 JSON 将画布图像上传到 RESTful Web 服务。

我不知道如何使用 JSON 将画布图像上传到 Web 服务，以及如何使用 Java 实现将画布图像检索到 Web 服务端的代码。

【问题讨论】：

能否添加一些您目前尝试过的代码？
@asg 这里是我的 javascript 和 html 代码的一部分。 jsfiddle.net/mkL58yez/2。现在我坚持如何将 json 链接到其他 Web 服务。我不知道如何在 java 中编码。

标签： javascript java html json rest

【解决方案1】：

我前段时间通过存储画布渲染图片的缩略图来做到这一点。基本上canvas对象有toDataURL()方法，我把它叫做toDataURL("image/png")，把它存储在表单的隐藏字段中，但你也可以直接用ajax调用发送。

然后基本上我将图像以该格式保存在 db 中，但您可以将其存储在硬盘驱动器上，可能更长期可持续。缩略图检索的示例 ruby/rails 实现：

def thumbnail
  render :status => 200,
         :content_type => 'image/png',
         :text =>  Base64.decode64(
           thumbnail["data:image/png;base64,".length .. thumbnail.length]
         ) # there is extra "data:image/png;base64," at the start
end

【讨论】：

谢谢，这个方法我试过了。部分示例jsfiddle.net/mkL58yez/2。现在我坚持如何将 json 链接到其他 Web 服务。我不知道如何在 java 中编码，因为我不确定转换图像文件的步骤。
好吧，您发送的内容是一个带有 imageData 属性的 json 对象。我假设您的后端接受 json 格式的 POST 请求，您可以像这样访问它 - 通过您创建的 imageData 字段。一旦您在服务器上拥有数据，您就可以随心所欲地存储文件 - 存储在硬盘驱动器或 s3 云中。您必须先从 base64 解码，然后以二进制格式存储。