Hi abualmazen,
Using the below article i have created an example.
For saving i have used HiddenField and on save button click converted the signature to base64string and pass the hiddenfield to controller.
Here i am saving the binary data in database.
Database
CREATE TABLE [tblFiles]
(
[Id] [int] IDENTITY(1,1) NOT NULL,
[Data] [VARBINARY](MAX) NULL
)
Controller
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
[HttpPost]
public IActionResult Index(string base64String)
{
byte[] bytes = Convert.FromBase64String(base64String.Split(',')[1]);
string constr = @"Data Source=.;Initial Catalog=Test;integrated security=true";
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("INSERT INTO tblFiles VALUES( @Data)", con))
{
cmd.Parameters.AddWithValue("@Data", bytes);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
return View();
}
}
View
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<form method="post" asp-controller="Home" asp-action="Index">
<div class="tools">
<a href="#colors_sketch" data-tool="marker">Marker</a> <a href="#colors_sketch" data-tool="eraser">
Eraser
</a>
</div>
<br />
<canvas id="colors_sketch" width="500" height="200" style="border: 1px solid #ccc">
</canvas>
<input type="hidden" name="base64String" />
<br />
<input id="btnSubmit" type="submit" value="Submit" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mobomo/sketch.js/master/lib/sketch.min.js"></script>
<script type="text/javascript">
$("body").on("click", "#btnSubmit", function () {
var base64 = $('#colors_sketch')[0].toDataURL();
$("input[name=base64String]").val(base64);
});
$(function () {
$('#colors_sketch').sketch();
$(".tools a").eq(0).attr("style", "color:#000");
$(".tools a").click(function () {
$(".tools a").removeAttr("style");
$(this).attr("style", "color:#000");
});
});
</script>
</form>
</body>
</html>
