Question

我还在这个项目的初步“搞清楚”阶段，所以如果这是基本的话，我道歉。我正在为一个网站创建一个html5 T恤设计应用程序，在衬衫图形字段上进行基本的拖放输入，在衬衫领域内调整大小和移动，并最终将其与一些文本输入字段一起提交。然后，顾客将为他们设计的衬衫付款并提交订单。我对html5比较陌生，到目前为止我已经发现我会使用canvas和拖放功能。我的问题是，因为我真的需要这个文本字段供客户输入一些信息，一些复选框字段等，并将其作为整个订单的一部分提交，画布可以包含在表单中，作为一部分一个表格？再说一遍，对不起，如果这是基本的，我正在弄清楚。感谢您的输入。有用的教程等上的任何线索都会很棒。我一直在寻找一段时间，但却找不到我真正想要的东西。

Answer 1

不幸的是，不可能使用<canvas>作为输入表单，但你可以做的是绘制到画布，然后在完成绘图操作后将其内容“导出”到<image>。幸运的是，您可以将图像用作表单。

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

翻译成代码，这将类似于以下代码段：

var canvasURL = canvas.toDataURL("image/png");
var img = document.getElementById("image").src = canvasURL;

在HTML中，您将定义ID为<input>

的image表单

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

但是，有一个安全问题需要解决：绘制到画布上的任何图像必须托管在同一个域上，并且执行它的代码与域相同。如果不满足此条件，则抛出SECURITY_ERR异常。

如果你需要一个更强大的图像和画布操作库，我可以推荐这个库，它有助于使用画布和图像：http://www.nihilogic.dk/labs/canvas2image/

canvas作为html5表单的一部分

1 个答案: