1

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

4

1 回答 1

3

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

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

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

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

在 HTML 中，您将<input>使用 ID 定义表单image

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

然而，有一个安全问题需要解决：绘制到画布上的任何图像都必须托管在与执行它的代码具有相同域的同一 Web 服务器上。如果不满足此条件，则会引发 SECURITY_ERR 异常。

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

于 2012-09-17T18:50:17.517 回答