将 html5 画布图像保存在客户端临时文件夹中以进行上传

Question

我从 mp4 视频创建了缩略图，并通过将 eventListener 添加到视频浏览按钮将其显示在同一页面上。 我希望当用户单击保存按钮时，视频以及所有其他字段应该保存在已经正常工作的数据库中。

现在的问题是我也在尝试将画布图像作为正常输入类型 = 文件发送。

为此，我有两个选择：

1- to save the canvas displayed image on client machine drive (html5 localstorage)
2- Or i have to send the canvas image to the server and then have to upload that from the temp uploaded folder (i know this is a stupid idea :)).

我不知道该怎么办？请帮忙

谢谢

Answer 1

您不必将画布假定为文件。当你在 canvas 上使用canvas.toDataURL('image/png') 时，它会返回一个 base64 编码的字符串，代表一个编码的 URL。然后你可以通过 POST 方法将字符串发送到服务器。

在服务器端根据您从客户端发送的 base64 编码字符串重建图像。