Resize an Image Before Upload to SharePoint List using REST API

Question

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

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 the SharePoint backend can accept data URL.

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

Answer 1

After resizing the image you can it as ArrayBuffer instead of toDataURL.

var imageData = context.getImageData(x, y, w, h);
var buffer = imageData.data.buffer;

Reference

Serialize canvas content to ArrayBuffer and deserialize again