#
Решил сам, ха-ха, в любом случае tnx, если вы нашли время, чтобы взглянуть на это.
Что я сделал: сохранил только base64 в базу данных и прочитал это в возрасте, чтобы просмотреть его работает отлично!
#
Нуб здесь и думаю, что я близок, но мне нужно немного пу sh в правильном направлении, так как я потратил пару дней на это, но не могу заставить его работать. Базовые c знание html, php и mysql, поэтому, пожалуйста, будьте осторожны со мной ;-)
Нашел эту статью, и она использует ту же панель подписи. js, но просто не понимаю.
HTML5 Canvas Save PNG onclick Кнопка отправки, PHP, MYSQL, Javascript
Сделали тест базы данных в MySql для сохранения данных из формы, и это прекрасно работало с использованием статей в StackOverflow, поэтому я могу сохранить значения, заполненные в форме, в базе данных. Теперь я бы тоже хотел добавить изображение подписи в базу данных.
Обнаружили, что лучше сохранять местоположение изображения, а не сохранять само изображение в базе данных и загружать изображение отдельно.
Пока у меня есть следующее, стр. 1. php где я могу заполнить некоторые поля формы и добавить подпись (Да!), Используя подпись-pad. js из https://da-software.net/en/2020/03/signature-field-in-html-form/
page1. php
<!DOCTYPE html>
<html>
<head>
<title>signature test</title>
<style type="text/css">
.m-signature-pad--body canvas {
position: relative;
left: 0;
top: 0;
width: 80%;
height: 250px;
border: 2px solid #000;
}
</style>
</head>
<body>
<form action="page2.php" method="POST" name="signature_test" onSubmit="submitForm();" enctype="multipart/form-data">
Name:
<br>
<input type="text" name="name">
<br>
Email:
<br>
<input type="text" name="email">
<br>
Age:
<br>
<input type="text" name="age">
<br>
<br>
<div id="signature-pad" class="m-signature-pad">
<div class="m-signature-pad--body">
<canvas></canvas>
<input type="hidden" name="signature" id="signature" value="">
</div>
</div>
<button type="submit">Continue</button>
</form>
<script src="signature_pad.js"></script>
<script type="text/javascript">
var wrapper = document.getElementById("signature-pad"),
canvas = wrapper.querySelector("canvas"),
signaturePad;
function resizeCanvas() {
var oldContent = signaturePad.toData();
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
signaturePad.clear();
signaturePad.fromData(oldContent);
}
function download(filename) {
var blob = dataURLToBlob(signaturePad.toDataURL());
var url = window.URL.createObjectURL(blob);
var a = document.createElement("a");
a.style = "display: none";
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
}
function dataURLToBlob(dataURL) {
var parts = dataURL.split(';base64,');
var contentType = parts[0].split(":")[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
}
function submitForm() {
document.getElementById('signature').value = signaturePad.toDataURL();
}
var signaturePad = new SignaturePad(canvas);
signaturePad.minWidth = 1;
signaturePad.maxWidth = 5;
signaturePad.penColor = "#000000";
signaturePad.backgroundColor = "#FFFFFF";
window.onresize = resizeCanvas;
resizeCanvas();
</script>
</body>
</html>
Затем я передаю заполненные данные на страницу 2. php, используя $ _SESSION ["name"] = $ name; и там отображается подпись холста в виде изображения.
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>signature test 2</title>
</head>
<body>
Name: <?php echo $_POST["name"]?><br>
Email: <?php echo $_POST["email"]?><br>
Age: <?php echo $_POST["age"]?><br>
<br>
<?php
$image = "";
if (isset($_POST["signature"]))
{
$image = $_POST["signature"];
echo "<img src=\"" . $image . "\">";
} else {
echo "<p>Image not transfered</p>";
}
?>
</body>
</html>
И вот где я застрял, как это исправить, чтобы я мог сохранить все данные, изображения, включенные в базу данных MySql?
Заранее благодарим за любые толчки в правильном направлении.
Привет из Запертой Испании Ганс