将画布保存为 jpeg 并通过 js 将输入字段保存到数据库答案

【问题标题】：Save canvas as jpeg and inputfields to database via js将画布保存为 jpeg 并通过 js 将输入字段保存到数据库
【发布时间】：2015-01-28 02:12:40
【问题描述】：

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

这是我的表格

<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>

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

【问题讨论】：

标签： javascript database html canvas

【解决方案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 方法以 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 脚本将取决于您使用的服务器和数据库软件。

【讨论】：