Upload avatar into premade graphic and export div as png or jpeg

I would like to know if this is possible, i’ve been trying endlessly for the past few days and the HTML 2 Canvas library will save the div as png but the image thats uploaded never renders. if someone can help me.

Having a bit of trouble, I just want to create a div that has the premade graphic, where a user can upload their picture / avatar into and export the div as png or jpg after clicking a “screenshot / save button”

Please help

Libraries

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
https://superal.github.io/canvas2image/canvas2image.js
https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js

HTML

    <div class="capturecontainer">
    <div class="container">
    <div class="avatar-upload">
        <div class="avatar-edit">
            <input type='file' id="imageUpload" accept=".png, .jpg, .jpeg" />
            <label for="imageUpload"></label>
        </div>
        <div class="avatar-preview">
            <div id="imagePreview" style="background-image: url(http://i.pravatar.cc/500?img=7);">
            </div>
        </div>
    </div>
</div>
  
  
        <button type="button" class="btn btn-default">Take a Screenshot!</button>
  
    </div>

CSS

 .avatar-upload {
     position: relative;
     max-width: 205px;
     margin: 50px auto;
}
 .avatar-upload .avatar-edit {
     position: absolute;
     right: 12px;
     z-index: 1;
     top: 10px;
}
 .avatar-upload .avatar-edit input {
     display: none;
}
 .avatar-upload .avatar-edit input + label {
     display: inline-block;
     width: 34px;
     height: 34px;
     margin-bottom: 0;
     border-radius: 100%;
     background: #FFFFFF;
     border: 1px solid transparent;
     box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.12);
     cursor: pointer;
     font-weight: normal;
     transition: all .2s ease-in-out;
}
 .avatar-upload .avatar-edit input + label:hover {
     background: #f1f1f1;
     border-color: #d6d6d6;
}
 .avatar-upload .avatar-edit input + label:after {
     content: "f040";
     font-family: 'FontAwesome';
     color: #757575;
     position: absolute;
     top: 10px;
     left: 0;
     right: 0;
     text-align: center;
     margin: auto;
}
 .avatar-upload .avatar-preview {
     width: 192px;
     height: 192px;
     position: relative;
     border-radius: 100%;
     border: 6px solid #F8F8F8;
}
 .avatar-upload .avatar-preview > div {
     width: 100%;
     height: 100%;
     border-radius: 100%;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
}
 

JS

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#imagePreview').css('background-image', 'url('+e.target.result +')');
            $('#imagePreview').hide();
            $('#imagePreview').fadeIn(650);
        }
        reader.readAsDataURL(input.files[0]);
    }
}
$("#imageUpload").on('click', function() {
    readURL(this);
     $('.avatar-edit').hide();
});


document.querySelector('button').addEventListener('click', function() {
        html2canvas(document.querySelector('.capturecontainer'), {
            onrendered: function(canvas) {
                // document.body.appendChild(canvas);
              return Canvas2Image.saveAsPNG(canvas);
            }
        });
    });