Привет, я пытаюсь сохранить подпись как изображение png в файле сервера, но я не знаю, как это сделать (я использую php и javascript в своем приложении).
Спасибо!
Решено с помощью этого кода:
if (isset($_POST['imageData'])) {
$imgData = base64_decode($_POST['imageData']);
$image_name= $_POST['image_name'];
// Path where the image is going to be saved
$filePath = '../img/'.$image_name.'.jpg';
// Delete previously uploaded image
if (file_exists($filePath)) { unlink($filePath); }
// Write $imgData into the image file
$file = fopen($filePath, 'w');
fwrite($file, $imgData);
fclose($file);
} else {
echo "imgData doesn't exists";
}
Привет,
У меня такая же проблема, но куда добавить ваш код?
Спасибо!
Привет @stupendomen
Я создаю новый файл .php (signature_pad.php) с предыдущим кодом и вызываю его с помощью функции ajax в файле, который содержит блокнот для подписи (когда вы нажимаете кнопку сохранения).
Что-то вроде этого:
`
var wrapper = document.getElementById("блокнот для подписи"),
clearButton = wrapper.querySelector("[data-action=clear]"),
saveButton = wrapper.querySelector("[data-action=save]"),
холст = обертка.querySelector("холст"),
блокнот для подписи;
// 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) {
event.preventDefault();
var nombre_receptor_form = $("#nombre_receptor_form").val();
var id_nombre_imagen = $("#id_nombre_imagen").val();
if ( signaturePad.isEmpty() ) {
alert("Please insert signature.");
} else {
var dataUrl = signaturePad.toDataURL();
document.getElementById('imagen_firma').src = dataUrl;
var imagen = dataUrl.replace(/^data:image\/(png|jpg);base64,/, "");
$.ajax({
url: './includes/signature_pad.php',
type: 'POST',
data: {
imageData: imagen
},
})
.done(function(msg) {
// Image saved successfuly.
console.log("success: " + msg);
document.getElementById("my_form").submit(); //I do this to save other information.
})
.fail(function(msg) {
console.log("error: " + msg);
});
`
Желаю, чтобы это было полезно для вас!
Идеально!
Спасибо
@ davidosuna1987 откуда берутся эти две строчки?
var form_receiver_name = $("#form_receiver_name").val();
var id_image_name = $("#id_image_name").val();
@davidosuna1987 @stupendomen У меня проблемы с этим! Можете ли вы показать мне, как заставить это работать? Я точно скопировал приведенный выше код и добавил файл dbconenct.php, но ничего не получил. Пожалуйста, помогите как можно скорее
можете опубликовать полный код? пожалуйста
Спасибо!
Спасибо. Очень полезно !
Спасибо!
@davidosuna1987
Хорошо, спасибо за вклад.
Но мне не удалось заставить его работать ни с новой версией SignaturePad, ни со старой.
Может ли кто-нибудь привести пример использования в php?
Большое Вам спасибо
Самый полезный комментарий
Привет @stupendomen
Я создаю новый файл .php (signature_pad.php) с предыдущим кодом и вызываю его с помощью функции ajax в файле, который содержит блокнот для подписи (когда вы нажимаете кнопку сохранения).
Что-то вроде этого:
`
var wrapper = document.getElementById("блокнот для подписи"),
clearButton = wrapper.querySelector("[data-action=clear]"),
saveButton = wrapper.querySelector("[data-action=save]"),
холст = обертка.querySelector("холст"),
блокнот для подписи;
`
Желаю, чтобы это было полезно для вас!