filedownload.js

function /* CLASS */ fileutil() {
    // this is a static class - no need to instantiate - just call its static/shared methods...
}; /* CLASS fileutil */

fileutil.filecontenttypes = {
    text_plain: 'text/plain',
    text_css: 'text/css',
    text_csv: 'text/csv',
    text_html: 'text/html',
    image_bmp: 'image/bmp',
    image_gif: 'image/gif',
    image_jpeg: 'image/jpeg',
    image_png: 'image/png',
    image_tiff: 'image/tiff',
    application_ecmascript: 'application/ecmascript',
    application_javascript: 'application/javascript',
    application_json: 'application/json',
    application_pdf: 'application/pdf',
    application_xml: 'application/xml',
    application_zip: 'application/zip'
};

fileutil.download = /* STATIC / SHARED */ function (data, filename, type) {
    var file = new Blob([data], { type: type });
    if (window.navigator.msSaveOrOpenBlob) // IE10+
        window.navigator.msSaveOrOpenBlob(file, filename);
    else { // Others
        var a = document.createElement("a"),
            url = URL.createObjectURL(file);
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        setTimeout(function () {
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);
        }, 0);
    }
}; // fileutil->_fileDownload

fileutil.saveSrcImage = /* STATIC / SHARED */ function(imgEl, filename) {
    fileutil.getImageBlob(imgEl).then(function (file) {
        var filename = filename;
        if (window.navigator.msSaveOrOpenBlob) // IE10+
            window.navigator.msSaveOrOpenBlob(file, filename);
        else { // Others
            var a = document.createElement("a"),
                url = URL.createObjectURL(file);
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            setTimeout(function () {
                document.body.removeChild(a);
                window.URL.revokeObjectURL(url);
            }, 0);
        }
    });
} // fileutil->saveSrcImage

fileutil.getImageBlob = /* STATIC / SHARED */ function(imgEl) {
    return new Promise(function (resolve, reject) {
        // Create an empty canvas element
        var canvas = document.createElement("canvas");
        canvas.width = imgEl.width;
        canvas.height = imgEl.height;

        // Copy the image contents to the canvas
        var ctx = canvas.getContext("2d");
        ctx.drawImage(imgEl, 0, 0);

        canvas.toBlob(function (blob) {
            resolve(blob);
        });
    });
} // fileutil->getImageBlob

//fileutil.download("hello, world!", "testdata.txt", fileutil.filecontenttypes.text_plain);

//function saveImage(img) {
//    console.log("saveImage Start");
//    getBase64Image(img).then(function(dataURI) {
//        console.log("Got DataURI");
//        convertURIToImageData(dataURI).then(function(image) {
//            console.log("Got Image Data: " + image);
//            fileutil.download(image, "testdata.txt", fileutil.filecontenttypes.image_png);
//        }).catch(function(err) {
//            console.log("Error:" + err);
//        });
//    });
//} // saveImage
//
//function getBase64Image(img) {
//    return new Promise(function(resolve, reject) {
//        // Create an empty canvas element
//        var canvas = document.createElement("canvas");
//        canvas.width = img.width;
//        canvas.height = img.height;
//
//        // Copy the image contents to the canvas
//        var ctx = canvas.getContext("2d");
//        ctx.drawImage(img, 0, 0);
//
//        // Get the data-URL formatted image
//        // Firefox supports PNG and JPEG. You could check img.src to
//        // guess the original format, but be aware the using "image/jpg"
//        // will re-encode the image.
//        var dataURL = canvas.toDataURL("image/png");
//
//        resolve(dataURL);
//        //resolve(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
//    });
//}
//
//function convertURIToImageData(URI) {
//    console.log("converting URI to image data");
//    return new Promise(function(resolve, reject) {
//        if (URI == null) return reject();
//        console.log("a");
//        var canvas = document.createElement('canvas');
//        var context = canvas.getContext('2d');
//        var image = new Image();
//        image.addEventListener('load', function() {
//            console.log("c image.load");
//            canvas.width = image.width;
//            canvas.height = image.height;
//            context.drawImage(image, 0, 0, canvas.width, canvas.height);
//            resolve(context.getImageData(0, 0, canvas.width, canvas.height));
//        }, false);
//        console.log("b");
//        image.src = URI;
//    });
//}