Canvas DataURL to image with filePath

Question

I'm creating a mobile application with cordova/PhoneGap and IonicFramework (using AngularJS). In the application the user is able to draw his signature on a canvas (https://github.com/szimek/signature_pad). Currently the canvas is saved as a DataURL:

data:image/png;base64,iVBORw0KGgoAAAANS ...

When the signature is saved, I want to send the image to the server using the FileTransfer plugin from Cordova (http://docs.phonegap.com/en/3.1.0/cordova_file_file.md.html#FileTransfer).

I already do this for regular images taken from the camera, and that works fine. This is my upload function:

function uploadPicture(fileURL) {

        var win = function (result) {
            console.log('Success!');
        }

        var fail = function (err) {
            console.log('Fail!');
        }

        var options = new FileUploadOptions();
        options.fileKey = 'file';
        options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
        options.mimeType = 'image/jpeg';
        options.chunkedMode = true;
        options.params = {};

        var ft = new FileTransfer();
        ft.upload(fileURL, encodeURI('http://example.com/upload/'), win, fail, options);
    }

Now as you can see the fileURL is the full path of the file. I figured out that when I somehow convert the dataURL to an actual image I could make use of the plugin (not 100% sure if this will fix it).

Is this possible somehow? I've searched a lot but couldn't find anything useful. Most examples are about sending the dataURL to the server and let the server handle it, but I'm not looking for that.

Any thoughts/ideas/help with this? I hope what I want is possible!

Answer 1

You will have to convert the base64 to an image on your device. Then upload it. However, it's better to just send the base64 to the server and let it handle in order to save space and time on client end.