Transfer src image to work instead of files

Question

So, I have a webpage with two image elements. This is basically the website where you upload the image, and it encrypts a secret massage with steganography. I want to show a difference that is otherwise not visible, and I found Resemble.js , which is a library for comparing images. It receives two files as arguments, and I would like to use image sources instead of files, since I do not want to save the created images.

To summarize, I want to get rid of requests and get my images through HTML sources, but I don’t know how to make it work with Resemble.js, since it only accepts files.

How the second image is created:

`cover.src = steg.encode(textarea.value, img, {"width": img.width, "height": img.height});

JavaScript working with files:

(function(){
    var xhr = new XMLHttpRequest();
    var xhr2 = new XMLHttpRequest();
    var done = $.Deferred();
    var dtwo = $.Deferred();

    try {
        xhr.open('GET', 'static/original.png', true);
        xhr.responseType = 'blob';
        xhr.onload = function (e) {
            done.resolve(this.response);
        };
        xhr.send();

        xhr2.open('GET', 'static/encoded.png', true);
        xhr2.responseType = 'blob';
        xhr2.onload = function (e) {
            dtwo.resolve(this.response);
        };
        xhr2.send();
    }catch (err){
        alert(err);
    }

    $('#example-images').click(function(){
        $.when(done, dtwo).done(function(file, file1){
            if (typeof FileReader === 'undefined') {
                resembleControl = resemble('./static/original.png').compareTo('./static/encoded.png').onComplete(onComplete);
            } else {
                resembleControl = resemble(file).compareTo(file1).onComplete(onComplete);
            }
        });

        return false;
    });

}());