将 HTML5 画布图像保存到数据库
Posted
技术标签:
【中文标题】将 HTML5 画布图像保存到数据库【英文标题】：Save an HTML5 canvas image to a database 【发布时间】：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。关键词：“搜索和研究”和“解释......任何阻碍你自己解决的困难”。
【参考方案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检索到其他页面
【讨论】：
以上是关于将 HTML5 画布图像保存到数据库的主要内容，如果未能解决你的问题，请参考以下文章