I am creating a signature form that needs to convert an HTML5 canvas to a .png file, then move that file to a directory where its information can be copied into a SQL table. While the canvas works perfectly well and is capable of sending images to the server on a desktop PC, it is having problems doing so from an iPad -- which is going to be used as the main device for signing forms.
On the iPad's side, something is preventing the canvas image from being created, resulting in blank images that the Windows 10 Photos app presents with the text "It looks like we don't support this file format."
A "save" button takes the data from the canvas and converts it to the UploadImage method in Base64.
$("#btnSave").click(function () {
var image = document.getElementById("myCanvas").toDataURL("image/png");
image = image.replace('data:image/png;base64,', '');
$.ajax({
type: 'POST',
url: 'Signature.aspx/UploadImage',
data: '{ "imageData" : "' + image + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json'
});
});
From here, the UploadImage() method stores the imageData text to the static string fileBit. When the user confirms this is the signature they want to send, the .aspx file will create the image from Base64 code, give it a name, and place it in the signature directory while writing the file's name to the SQL table.
What I have tried:
I have tried opening access to certain directories, but this did not solve the issue of writing. After moving various files to various directories with the iPad, it is my understanding that something must be wrong with the fileStream part of this program, as something within it is not writing correctly, thus the signatures made on the iPad are not being made into images.
Previously, the image was being sent to a temporary directory, but now it is sent straight to the permanent directory, as the program writes the image from a string with the Base64 code.