Click here to Skip to main content
15,867,594 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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.
JavaScript
$("#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.
Posted
Updated 12-Aug-19 2:02am
v2
Comments
[no name] 2-Aug-19 11:19am    
Your problem seems to be "creating" the image on the IPad in the first place, not "sending".

Just create any image in the default location; then start worrying about "moving it around".
Alex Reynaud 2-Aug-19 13:18pm    
You're right; creating the image is the problem and that's what I want to know about. I'll change the title of this question.

Quote:
Whether you actively use it or not, every iOS app you develop has its own unique sandboxed file system comprised of a set of directories, most notably the “Documents” directory. Detailed discussion of the iOS file system’s structure and how you perform tasks like reading, writing, deleting, renaming, moving, and listing files is beyond the scope of this tutorial, but don’t worry if this is all new to you. I’ve wrote several detailed tutorials covering most salient iOS file management topics, for example, here and here.


How to Integrate Your App with Files App in iOS 11 | Swift Tutorial[^]
 
Share this answer
 
Comments
Alex Reynaud 5-Aug-19 9:53am    
Thank you for the link, but the iPads my company uses are -- at the newest -- from 2014 and will only be able to run up to iOS 10.3.3. In addition, the app I'm working with is a web app, hence "url: 'Signature.aspx/UploadImage'." The users are expected to go to the website and submit their signature on a canvas -- which is then automatically sent to the server as an image. Nothing is being stored on the iPad itself, which is why I'm confused that there's only a problem when doing this sort of thing on a touch interface.
[no name] 5-Aug-19 14:24pm    
You're taking "storing" too literally.

It's about "staging" the image on the IPad UNTIL you figure out how to send it.

You said yourself you have a problem "creating the image". Where do you otherwise expect to create it? In the "ether"?
Alex Reynaud 5-Aug-19 16:08pm    
Well, I understand we're not *literally* opening files or images here. As of now, the Base64 code that's created when the user clicks btnSave is sent through a static method -- which then pushes that data through a BinaryWriter and writes the file to a specified directory. This works fine on a PC, but not mobile devices.
The issue is actually not a JavaScript error, but a C# error. Here is what UploadImage() should be doing:
C#
public static void UploadImage(string imageData)
{
    var impersonator = new ImpersonationHelper("<domain>", "<username>", "<password>");
    impersonator.StartImpersonating();
    string path = @"\\\\PATH\\TO\\FILE\\DIRECTORY\\";
    if (!Directory.Exists(path)) // creates a new folder if this one doesn't currently exist yet
        Directory.CreateDirectory(path);
    string fileNameWithPath = path + "SIG" + DateTime.Now.ToString("MMddyyyy") + "-" + rand + ".png"; // where rand is randomly-generated elsewhere
    byte[] imageBytes = Convert.FromBase64String(imageData);
    File.WriteAllBytes(fileNameWithPath, imageBytes);
    impersonator.StopImpersonating();
}

Rather than use a FileWriter, the code should split the Base64 string into a series of bytes so that it can be written to a file regardless of which device is being used to send the image data. I have confirmed that this works from an iPad without any issue.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900