There is a brand new drawing pad (pen tool) plugin from Jquery found in that link:
https://www.jqueryscript.net/other/signature-draw-pad.html.
As it is new I cannot see how to transform it into image to save it to database with php. I cannot find any explanation on how to use this plugin for that purpose.
Anyone has information on how to do that ?
Thank you !!
See Question&Answers more detail:os
A little inspect/devtools shows that the doodle/image/drawing is stored in html canvas element.
You can get the content of html canvas element with toDataURL() function.
Here is MDN docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
Example: var base64Image = $("#target canvas").get(0).toDataURL();
You can then post it (example: via ajax, via form post, etc) to your backend and store the base64 in database.
Here is example snippet
$(document).ready(function() {
// set background
var urlBackground = 'https://picsum.photos/id/100/500/400';
var imageBackground = new Image();
imageBackground.src = urlBackground;
//imageBackground.crossorigin = "anonymous";
imageBackground.setAttribute('crossorigin', 'anonymous');
$("#target").drawpad();
var contextCanvas = $("#target canvas").get(0).getContext('2d');
imageBackground.onload = function(){
contextCanvas.drawImage(imageBackground, 0, 0);
}
// post the base64 image to some endpoint
$("#saveToDatabase").click(function() {
var base64Image = $("#target canvas").get(0).toDataURL();
console.log(base64Image);
$("#outputBase64FormInput").val(base64Image);
$("#outputBase64").html(base64Image);
});
// form submit
$("#myform").submit(function() {
var base64Image = $("#target canvas").get(0).toDataURL();
console.log(base64Image);
$("#outputBase64FormInput").val(base64Image);
$("#outputBase64").html(base64Image);
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cnbilgin.github.io/jquery-drawpad/jquery-drawpad.css" />
<style>
body {background-color:rgb(248, 255, 227)}
#target {
width:500px;
height:400px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cnbilgin.github.io/jquery-drawpad/jquery-drawpad.js"></script>
</head>
<body>
<button id="saveToDatabase">Save Drawing</button>
<div id="target" class="drawpad-dashed"></div>
<div id="outputBase64"></div>
<form id='myform' method="POST">
value1 <input id='value1' name='myvalue1' />
value2 <input id='value2' name='myvalue2' />
<input type='hidden' id='outputBase64FormInput' name='mybase64image'>
<input type='submit'>
</form>
</body>
</html>