static/ui/js/fr_file.js

// do not compress more than declared below, otherwise canvas will be blank
// https://github.com/jhildenbiddle/canvas-size
var maxCanvasWidth = 4096, maxCanvasHeight = 4096;
// accepted file type on uploading
var acceptedFileType = ['jpg', 'jpeg', 'png'];
// compressor options, for compressing captured and uploaded image
Compressor.setDefaults({
    mimeType: 'image/png',
    maxWidth: 1050,
    maxHeight: 800,
    convertSize: 2000000,
});


// file change
$('.file-capture').change(function() {
    var file = event.target.files[0]
        , $img = $('#img-preview');

    if (file === undefined) modalAlert(gettext('Invalid Image'), gettext('No image file selected'));
    new Compressor(file, {
        success: function(result) {
            blobToDataURL(result, function(dataURL) {
                $img.attr('src', dataURL);
                $('.page-header, .page-subheader, .default-container, .webcam-container').hide();
                $('.preview-container, #btn-skip').show();
            });
        },
        error: function(err) {
            console.error('Compressor() error:'+ err.message);
            modalAlert(gettext('Error'), gettext('Error capturing image'));
        },
    });
});


// btn-next click
$('#btn-next').click(function() {
    var imgData = $('#img-preview').attr('src')
        , imgType = imgData.substring("data:image/".length, imgData.indexOf(";base64"))
        , index = imgType == 'jpeg' ? 23 : 22
        , $frFile = $('#id_fr_file');
    
    $frFile.val(imgData.substring(index)); // remove `data:image/png;base64,` or `data:image/jpeg;base64,` on dataURL
    $('#form-fr').submit();
});


// blob to dataURL
function blobToDataURL(blob, callback) {
    var reader = new FileReader();
    reader.onload = function(e) { callback(e.target.result); }
    reader.readAsDataURL(blob);
}


// dataURL to blob
function dataURLtoBlob(dataURL) {
    var arr = dataURL.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}