Heya fellow devs!
I’ve been trying to make a digital signature pad for the past few weeks, but have been running into the issue of saving canvas “images” to the server from a touch interface. Despite the image data sending perfectly fine when testing from Visual Studio and from the live website on a regular Windows PC, the iPad seems incapable of sending the Base64 code through the static JavaScript function I’ve set in the ASP files. However, rather than give me a standard error screen, submitting a signature from the iPad creates an empty .png file — the likes of which Windows 10 cannot open because “it looks like we don’t support this file format.” To add to this, I’m given a blank document when opening the file in Notepad.
The code I’ve written to create an image from a signature can be seen below. Please note the “_function DrawPad() {…}
– https://www.html5canvastutorials.com…t-application/– –
“`
<body data-rsssl=”1″ onload=”DrawPad()”>
<form id=”form1″ runat=”server”>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”></asp:ScriptManager>
<input type=”hidden” id=”imageData” runat=”server” class=”image-data” />
<canvas id=”myCanvas” width=”500″ height=”100″></canvas>
<br />
<asp:Button ID=”btnSave” runat=”server” Text=”Submit” />
</form>
<script type=”text/javascript” id=”jsDraw”>
var canvas = document.getElementById(‘myCanvas’);
var ctx = canvas.getContext(‘2d’);
function DrawPad() {…} // see the bullet points for this one
$(“#btnSave”).click(function () {
var image = document.getElementById(‘myCanvas’).toDataURL(“image/png”);
image = image.replace(‘data:image/png;base64,’, ”);
$.ajax({
type: ‘POST’,
url: ‘Default.aspx/UploadImage’,
data: ‘{ imageData : “‘ + image + ‘” }’,
contentType: ‘application/json; charset=utf-8’,
dataType: ‘json’
});
});
</script>
</body>
At the risk of getting slapped on the wrist for posting C# code on a JS board (new guy — sorry!), here is what happens on the ASP side when btnSave is pressed:
“`
public static void UploadImage(string imageData)
{
using (FileStream fs = new FileStream(@”C:\Users\Alex\Documents\testpic.png”, FileMode.Create))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
bw.Write(Convert.FromBase64String(imageData));
bw.Close();
}
}
}
I’ve asked others whether this issue is related to the FileStream or BinaryWriter or something within the JavaScript side of this app, but so far the most I have gotten back is a comment about how I should utilize the iOS “Files” app and directory when (and I should stress this clearly) the work I’m doing here is NOT for a mobile app, but for a website that users will access from a mobile device. And I would like to stress one more time: this web app works perfectly fine on a desktop environment with a modern browser, but not on any mobile device I’ve tested on — and I cannot wrap my head around why this is.