如何将 Canvas 图像保存到数据库？
我有一个带有保存按钮的签名板，单击该按钮会打开一个新窗口并显示图像。我想更改按钮的行为，以便将图像保存到数据库中以便稍后显示。
我无法将数据 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());
}
});
最佳答案
刚刚找到了这个问题的答案。我想我应该给出答案。其他人可能也有同样的问题。
将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
关于javascript - 将 HTML5 Canvas 图像保存到数据库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41023681/