Forms 画布作为html5表单的一部分

Forms 画布作为html5表单的一部分,forms,html,canvas,drag-and-drop,Forms,Html,Canvas,Drag And Drop,我仍然在这个项目的初步“弄清楚”阶段,所以如果这是基本的,我道歉。我正在为一个网站创建一个html5 t恤设计应用程序,将基本的拖放输入到衬衫图形字段中,在衬衫字段中调整大小并移动,最后将其与一些文本输入字段一起提交。然后,客户将为他们设计的衬衫付款并提交订单。我对html5比较陌生,到目前为止,我已经知道我会使用画布和拖放功能。我的问题是,既然我真的需要它与文本字段一起供客户输入一些信息,以及一些复选框字段等,并将其作为整个订单的一部分提交,那么画布可以作为表单的一部分包含在表单中吗? 再说一

我仍然在这个项目的初步“弄清楚”阶段,所以如果这是基本的,我道歉。我正在为一个网站创建一个html5 t恤设计应用程序,将基本的拖放输入到衬衫图形字段中,在衬衫字段中调整大小并移动,最后将其与一些文本输入字段一起提交。然后,客户将为他们设计的衬衫付款并提交订单。我对html5比较陌生,到目前为止,我已经知道我会使用画布和拖放功能。我的问题是,既然我真的需要它与文本字段一起供客户输入一些信息,以及一些复选框字段等,并将其作为整个订单的一部分提交,那么画布可以作为表单的一部分包含在表单中吗?
再说一次,如果这是基本的,对不起,我会边走边想。谢谢你的意见。任何关于有用的教程等的线索都会非常棒。我已经找了一段时间了,但还没有找到我要找的东西

不幸的是,无法使用
作为输入表单,但您可以做的是将其绘制到画布中,然后在完成绘制操作后将其内容“导出”到
中。幸运的是,您可以使用图像作为表单

将画布内容绘制到图像中的标准方法是使用
canvas.toDataURL(“image/png”)方法

翻译成代码后,这将类似于下面的代码片段:

var canvasURL = canvas.toDataURL("image/png");
var img = document.getElementById("image").src = canvasURL;
在HTML中,您将使用ID
图像定义
表单

<form>
     <input type="image" id="image" onsubmit="submit();">
</form> 

但是,需要解决一个安全问题:绘制到画布上的任何图像都必须托管在与执行它的代码具有相同域的同一web服务器上。如果不满足此条件,将引发安全错误异常


如果您需要一个更强大的图像和画布操作库,我可以推荐这个库,它可以帮助您处理画布和图像:

如果您认为提供的答案令人满意,请不要忘记提供反馈!一个备注将提交用户单击的x/y。画布的内容将不会提交