将 HTML5 画布图像保存到数据库答案

【问题标题】：Save an HTML5 canvas image to a database将 HTML5 画布图像保存到数据库
【发布时间】：2017-04-22 18:19:41
【问题描述】：

如何将画布图像保存到数据库中？

我有一个带有保存按钮的签名板，它会打开一个新窗口并在单击时显示图像。我想更改按钮的行为，以便将图像保存到数据库以便稍后显示。

我在获取数据 URL 以发送到下一页时遇到问题，我可以在下一页处理它以将其插入数据库。

我正在使用 phpMyAdmin。

这是index.html 文件：

<body onselectstart="return false"> 

  <div id="signature-pad" class="m-signature-pad">
    <div class="m-signature-pad--body" >
      <canvas>
        
      </canvas>
    </div>
    <div class="m-signature-pad--footer">
      <div class="description">Sign above</div>
      <button type="button" class="button clear" data-action="clear">Clear</button>
      <button type="button" class="button save" data-action="save">Save</button>
    </div>
  </div>

  <script src="js/signature_pad.js"></script>
  <script src="js/app.js"></script>
</body>`

这里是app.js:

var wrapper = document.getElementById("signature-pad"),
    clearButton = wrapper.querySelector("[data-action=clear]"),
    saveButton = wrapper.querySelector("[data-action=save]"),
    canvas = wrapper.querySelector("canvas"),
    signaturePad;

// Adjust canvas coordinate space taking into account pixel ratio,
// to make it look crisp on mobile devices.
// This also causes canvas to be cleared.
function resizeCanvas() {
    // When zoomed out to less than 100%, for some very strange reason,
    // some browsers report devicePixelRatio as less than 1
    // and only part of the canvas is cleared then.
    var ratio =  Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
}

window.onresize = resizeCanvas;
resizeCanvas();

signaturePad = new SignaturePad(canvas);

clearButton.addEventListener("click", function (event) {
    signaturePad.clear();
});

saveButton.addEventListener("click", function (event) {
    if (signaturePad.isEmpty()) {
        alert("Please provide signature first.");
    } else {
        window.open(signaturePad.toDataURL());
    }
});

Here is a JSfiddle

【问题讨论】：

对不起。但这就是我不知道如何开始的问题。我刚开始学习javascript。
保存到数据库（通常）是在服务器上完成的，因此它与 JavaScript 无关，需要服务器端的一些代码。如果您是 JavaScript 新手，我建议您尝试一些更简单的方法，因为 SO 不是提出此类问题的好地方。
@ftanis 如果我将window.open(signaturePad.toDataURL()); 更改为window.open("newpage.php?image="signaturePad.toDataURL()); 并使用$_GET[image] 并将其插入数据库你认为它会工作吗？
理论上可以，但是有几个注意事项（最值得注意的是，GET 请求的大小是有限制的，所以我建议您改用POST）。但是，这仍然需要通过 PHP 存储在数据库中，这超出了 JavaScript 的范围。
请阅读How to Ask。关键词：“搜索和研究”和“解释......任何阻碍你自己解决的困难”。

标签： javascript html phpmyadmin html5-canvas

【解决方案1】：

刚刚找到了这个问题的答案。我想我应该给出答案。其他人可能有同样的问题。

将 DataURL 发送到下一页。我只是改变我的代码

来自

    saveButton.addEventListener("click", function (event) {
    if (signaturePad.isEmpty()) {
        alert("Please provide signature first.");
    } else {
        window.open(signaturePad.toDataURL());
    }
});

到

saveButton.addEventListener("click", function post (event) {

    if (signaturePad.isEmpty()) {
        alert("Please provide signature first.");
    } else {
        document.body.innerHTML += '<form id="form" action="newpage.php" method="post"><input type="hidden" name="image" value="'+signaturePad.toDataURL()+'"></form>';
        document.getElementById("form").submit();

    }
  });

刚刚在 javascript 中添加了一个表单和隐藏的输入。现在可以使用$_POST检索到其他页面

【讨论】：