Question

是将画布图像保存到数据库的任何方法。所以我在这里有一个签名板，它们是一个保存按钮，在其中打开一个新窗口并显示图像。我想更改保存按钮的功能，在其中将图像保存到数据库以便稍后显示。 BTW即时通讯使用PHPmyadmin。

我无法将DATAurl发送到下一页，我可以在其中处理它以插入数据库

这是我的代码

的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

由于

Answer 1

刚刚找到答案。我想我应该回答。其他人也可能遇到同样的问题。

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

来自

$ mysql -u root -p
Enter password: 
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 2 to server version: 5.0.22-standard

Type 'help;' or '\h' for help. Type '\c' to clear the buffer.

mysql> SELECT VERSION();
+-----------------+
| VERSION()       |
+-----------------+
| 5.0.22-standard | 
+-----------------+
1 row in set (0.00 sec)

mysql> SELECT @@GLOBAL.sql_mode, @@SESSION.sql_mode;
+-------------------+--------------------+
| @@GLOBAL.sql_mode | @@SESSION.sql_mode |
+-------------------+--------------------+
|                   |                    | 
+-------------------+--------------------+
1 row in set (0.00 sec)

mysql> SELECT ACOS(COS(RADIANS(37.09024)) * COS(RADIANS(37.09024) ) * COS(RADIANS(-95.712891) - RADIANS(-95.712891)) + SIN(RADIANS(37.09024)) * SIN(RADIANS(37.09024)));
+-----------------------------------------------------------------------------------------------------------------------------------------------------------+
| ACOS(COS(RADIANS(37.09024)) * COS(RADIANS(37.09024) ) * COS(RADIANS(-95.712891) - RADIANS(-95.712891)) + SIN(RADIANS(37.09024)) * SIN(RADIANS(37.09024))) |
+-----------------------------------------------------------------------------------------------------------------------------------------------------------+
|                                                                                                                                                         0 | 
+-----------------------------------------------------------------------------------------------------------------------------------------------------------+
1 row in set (0.00 sec)

到

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

刚刚在javascript中添加了表单和隐藏的输入。现在可以使用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(); } });

检索到其他页面

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

1 个答案: