HTML5将画布保存到服务器上的文件 [英] HTML5 save canvas to file on server

问题描述

我需要使用html5 canvas创建一个组件，用户可以在其上绘制图片，并直接（通过一种保存按钮）在服务器上上传自定义版本。

我可以使用html canvas吗？
任何建议？

提前thx

解决方案

你可以像这样的数据网址获取图像：

  var dataUrl = document.getElementById（'your-canvas'）。 toDataURL（）; 
  

然后，您可以将这个（非常长的字符串）发送到服务器，并在解码后将其保存到文件

编辑：请务必通过 POST ，如评论中所建议的。 GET 在各种浏览器中有一些长度限制，因此它可能会超过这些极限的数据。

i need to create a component using html5 canvas that given an image the user can paint on it and directly (via a kind of save button) upload it's customized version on the server.

Can i use html canvas for it ? Any suggestion ?

thx in advance

解决方案

You can get the image as data-url like this:

var dataUrl = document.getElementById('your-canvas').toDataURL();

You could then send this (very long string) to the server and save it to a file after decoding it (it is encoded in base64).

EDIT: Remember to submit this via POST, as suggested in the comments. GET has some length-limits in various browsers, so its likely to exceed those limits with such a huge amout of data.

这篇关于HTML5将画布保存到服务器上的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！