HTML5：畫布圖像保存到數據庫
[英]HTML5: canvas image save to database
問題描述
是他們將畫布圖像保存到數據庫的任何方式。 所以我在這里有一個簽名板，它們是一個保存按鈕，在其中打開一個新窗口並顯示圖像。 我想更改保存按鈕的功能，在其中將圖像保存到數據庫中以便以后顯示。 順便說一句我使用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());
}
});
謝謝
1 個解決方案
解決方案1
0 2016-12-07 18:16:39
剛剛找到答案。 我想我應該回答。 其他人可能也有同樣的問題。
將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 Canvas將圖形另存為圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.