js图片合成并下载需求无法实现

我想实现图片合成并下载，但是下载出来的图片只有id为baseimg中的图片，并没有id为styleimg的图片，请问大家这个应该怎么解决，谢谢。

```html
html>
<html>
<head>
<meta charset="utf-8">
<title>JS实现图片合成title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">script>
<script src="./js/jquery-ui.min.js">script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js">script>
<script type="text/javascript">
    function BaseImage(imgFile) {                           
        var f = imgFile.files[0];                           
        var filereader = new FileReader();                  
        filereader.onload = function (event) {              
            var srcpath = event.target.result;              
            $("#baseimg").attr("src",srcpath);              
        };
        filereader.readAsDataURL(f);                      
    }

    function StyleImage(imgFile) {                          
        var getTag = imgFile.getAttribute("src");
        var styleimg = document.getElementById("styleimg");
        styleimg.src = getTag;
    }

    $(function() {
        $( ".drg" ).draggable();                            
    });

    function down() {                                       
        html2canvas($(".whole"),{           
            onrendered:function(canvas) {             
                var link = document.createElement('a');     
                link.download = 'my-image-name.jpg';        
                link.href = canvas.toDataURL();             
                link.click();                         
            },
        })
    }
script>

<style>
    ul {
        list-style: none;
    }
    li {
        float: left;
    }
    li img {
        width:5vw;
        height:15vw;
        margin-right: 2vw;
    }
style>
head>
<body>
    <fieldset style="width: 15.78vw; height: 15.78vw;">
        <div style="background: url(https://www.vaporesso.com/hubfs/imgs/activity/px80/logo.png) no-repeat center center / 5.16vw 6.98vw; background-color: #FFF; position: absolute; float: left;">
            <input onchange="BaseImage(this)" type="file" accept="image/*" style="width: 15.78vw; height: 15.78vw; position: relative; cursor: pointer; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;" />    
            <a style="position: absolute; right: 1.5vw; bottom: 1.5vw; z-index: 2; width: 2.45vw; height: 2.5vw;">
                <img src="https://www.vaporesso.com/hubfs/imgs/activity/px80/upload.png" />
            a>
        div>
    fieldset>

    <fieldset style="width: 100vw; height: 15.78vw;">
        <ul>
            <li><img onclick="StyleImage(this);" src="./img/01.png" />li>
            <li><img onclick="StyleImage(this);" src="./img/02.png" />li>
            <li><img onclick="StyleImage(this);" src="./img/03.png" />li>
            <li><img onclick="StyleImage(this);" src="./img/04.png" />li>
            <li><img onclick="StyleImage(this);" src="./img/05.png" />li>
            <li><img onclick="StyleImage(this);" src="./img/06.png" />li>
        ul>
    fieldset>

    <span class="whole" style="width: 544px; display: inline-block; position: relative;">
        <img id="baseimg" style="width:100%; height:auto;" />
        <div style="height: 100%;width: 100%;top:0;position: absolute;overflow: hidden;">
            <div class="drg" style="position: absolute;width:100px;top: 0px;left: 0px;display: inline-block;">
                <img id="styleimg" style="width:100%;cursor: pointer;" />
            div>
        div>
    span>

    <fieldset>
        <div style="position:relative;">
            <button onclick="down()" >Download Imagebutton>
        div>
    fieldset>
body>
html>
```