Question

所以我可以将图片上传到画布，然后在画布上你应该能够自定义图片（这也不起作用，但问题不那么紧迫）。然后，在您自定义它之后，您必须提供您的电子邮件和名称，这三件事应该发送到数据库，以便我可以在库中获取它们。但是我的代码技能不够好，无法做到这一点，找到所有这些不同的方法只是让我感到困惑。

这是我的表格

<div id="canvas">
  <canvas width="800" height="700" id="canvas_manly"><img id="image"/></canvas>
  <form>
    <div class="formcontent">
      <label for="name">Name</label>
      <input type="text" class="input" name="name" placeholder="Name"></br>
      <label for="email">Email</label>
      <input type="email" class="input" name="email" placeholder="Email"></br>
      <input type="submit" class="submit" value="SUBMIT" onClick="sendInfo"></br>
    </div>
  </form>

我不知道如何从这里继续。

Answer 1

以下是一些可以帮助您入门的说明：

假设您有输入用户名称和元素的元素。电子邮件和包含标记内容的画布元素：

<canvas id='canvas'></canvas>
<div>
    <input type='text' id='name'>
    <input type='text' id='email'>
</div>

然后你可以在javascript中获得对这些元素的引用：

// get references to the desired elements
var nameElement=document.getElementById('name');
var emailElement=document.getElementById('email');
var canvasElement=document.getElementById('canvas');

您可以使用jQuery的AJAX方法发布用户名称＆amp;电子邮件加上dataURL表单中的画布内容。您可以使用画布的.toDataURL方法将画布内容转换为dataURL（字符串）：

$.ajax({
  type: "POST",
  url: "scriptOnYourServerToSaveToDatabase.php",
  data:{
      name: nameElement.value,
      email: emailElement.value,
      image: canvasElement.toDataURL()
  }
})
  .done(function(result){
    alert("Done: "+result);
  });

当然，scriptOnYourServerToSaveToDatabase脚本取决于服务器和服务器。您正在使用的数据库软件。

通过js将画布保存为jpeg和inputfields到数据库

1 个答案: