Resize an Image Before Upload to SharePoint List using REST API

I'm uploading an image to a SharePoint list using the REST API based on documentation here. My function looks like:

function uploadFile(FormDigest, FileInput, fileName) {
    var serverRelativeUrlToFolder = 'Lists/Pictures';
    var fileInput = jQuery(FileInput);

    var serverUrl = myURL + "PunchlistTracking";

    var getFile = getFileBuffer();

    getFile.done(function (arrayBuffer) {

        var addFile = addFileToFolder(arrayBuffer);
        addFile.fail(onError);
    });

    getFile.fail(onError);

    function getFileBuffer() {
        var deferred = jQuery.Deferred();
        var reader = new FileReader();
        reader.onloadend = function (e) {
            deferred.resolve(e.target.result);
        }
        reader.onerror = function (e) {
            deferred.reject(e.target.error);
        }
        reader.readAsArrayBuffer(fileInput[0].files[0]);
        return deferred.promise();
    }   //  getFileBuffer

    function addFileToFolder(arrayBuffer) {

        var fileCollectionEndpoint = String.format(
                "{0}/_api/web/getfolderbyserverrelativeurl('{1}')/files" +
                "/add(overwrite=true, url='{2}')",
                serverUrl, serverRelativeUrlToFolder, fileName);

        return jQuery.ajax({
            url: fileCollectionEndpoint,
            type: "POST",
            data: arrayBuffer,
            processData: false,
            headers: {
                "accept": "application/json;odata=verbose",
                "X-RequestDigest": FormDigest,
                "content-length": arrayBuffer.byteLength
            },
            success: function () {
                $('#ajaxBusy').hide();
                $("#addNewItemButton").show();
                $("#cancelButton").show();
                addNewPunchlistItem();
            }
        });
    }   //  addFileToFolder

    function onError(error) {
        alert(error.responseText);
    }   //  onError
}   //  uploadFile

Select allOpen in new window

This works great except I'd like to resize the image before uploading, because users will be uploading from mobile, and don't need the default resolution iPhone and Galaxy provides. I've looked at HTML5 canvas resizing (e.g. here) but am not sure if the SharePoint backend can accept data URL.

What's the best way to do resize the image before posting to the SharePoint list?