HTML5：画布图像保存到数据库

Question

is their any way to save the canvas image to database. 是他们将画布图像保存到数据库的任何方式。 so i have here an signature pad and their is a save button where in it opens a new window and displays the image. 所以我在这里有一个签名板，它们是一个保存按钮，在其中打开一个新窗口并显示图像。 i want to change the function of the save button where in it will save the image to database to be displayed later. 我想更改保存按钮的功能，在其中将图像保存到数据库中以便以后显示。 BTW im using PHPmyadmin. 顺便说一句我使用PHPmyadmin。

im having trouble in getting the DATAurl to send to a next page where in i can process it to be inserted to the database 我在获取DATAURL发送到下一页时遇到麻烦，我可以在其中处理将其插入数据库

HERE's My Code 这里是我的密码

index.html 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 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 这是一个JSfiddle

Thanks 谢谢

Answer 1

Just found an answer to this. 刚刚找到答案。 and i think i should put the answer. 我想我应该回答。 other people might have the same problem. 其他人可能也有同样的问题。

to send DataURL to the next page . 将DataURL发送到下一页。 i just change my code 我只是更改我的代码

from 从

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

to 至

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();

    }
  });

just added a form and hidden input in javascript . 刚刚在javascript中添加了表单并隐藏了输入。 now it can be retrieve to other page using $_POST 现在可以使用$_POST检索到其他页面

HTML5：画布图像保存到数据库

问题描述

1 个解决方案

解决方案1
0 2016-12-07 18:16:39

HTML5：画布图像保存到数据库

问题描述

1 个解决方案

解决方案1 0 2016-12-07 18:16:39

解决方案1
0 2016-12-07 18:16:39