Html2Canvas-CORS-Image-Hack.js

/* Change all src urls loaded from external urls 
 *  to dataUrls stored on the local storage.
 */
var changeAllSrcToDataUrl = function() {
    // Get all images on page or element to render
    $("img").each(function() {
        var image = this;
        // If it last image, proceed to canvas rendering
        var isLast = this === $("img")[$("img").length - 1] || false;

        var options = {};
        options.format = 'image/png'; //set output format
        options.quality = -.8; //set outout quality
        options.cors = 'Anonymous';
        // convert image src url to local data url
        srcToDataUrl(this.src, options)
            .then(function(dataURL) {
                //generate random names for localstorage keys
                var rand = Math.floor(Math.random() * 50);
                //add new generated dataurl to localstorage
                localStorage.setItem(rand, dataURL);
                //set localstorage dataurl as new image src
                image.src = localStorage.getItem(rand);
                // if this is the last image in the selection, proceed to canvas rendering
                if (isLast) {
                    renderElementToCanvas();
                }
            });
    });
};

// Generate new dataUrl from image src attribute
var srcToDataUrl = function(url, params) {
    return new Promise(function(resolve, reject) {
        img = new Image();
        //set CORS value, anonymous will be suitable here
        img.crossOrigin = params.cors;
        img.onload = function() {
            var canvas = document.createElement('CANVAS'),
                ctx = canvas.getContext('2d'),
                dataURL;
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img, 0, 0);
            dataURL = canvas.toDataURL(params.format, params.quality);
            resolve(dataURL);
            canvas = null;
        };
        img.src = url;
    });
};


/* User the Html2Image Library to render 
 *  the element to html after converting image src to data urls
 */
var renderElementToCanvas = function() {
    //select element to render to canvas
    var element = document.getElementByID("profile-content");
    html2canvas(element, {
        //if left empty, it create a transparent background
        background: '#fafafa',
        //Render each letter, help avoid text smudging
        letterRendering: true,
        //Show log of process in console
        logging: true,
        onrendered: function(canvas) {
            var image = new Image();
            //set canvas dataurl as new image source
            image.src = canvas.toDataURL("image/jpeg");
            /* Start image download */
            //create anchor element
            var link = document.createElement('a');
            //insert element on page
            document.body.appendChild(link);
            //set name for image to be downloaded
            link.download = "image.jpeg";
            link.href = image.src.replace("image/jpeg", "image/octet-stream");
            // download image to browser
            link.click();
            localStorage.clear();
        }
    });
};

@ttola where to use this code? html2canvas.js?