allowing desktop image to appear on div download
<p>is their any way that it would be possible to allow a user to upload his/ her images from desktop to an html2canvas? i would like for the user to upload images into a div convert to image after they are done, allong with the image they uploaded. i can convert the div to image but i cannot download the image to my desktop, with an outside image. i can only download the image to my desktop without outside images. this fist script is for downloading the div image to desktop</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var download = document.getElementById("download"),
  result = document.getElementById("previewImage");

function renderContent() {
    html2canvas(document.getElementById("firstshirt"), {
        allowTaint: true
    }).then(function(canvas) {
      result.appendChild(canvas);
        download.style.display = "inline"; download.href = result.children[0].toDataURL();
    });
}

function downloadImage() {
  
}

document.getElementById("btn-Preview-Image").onclick = renderContent;
download.onclick = downloadImage</code></pre>
</div>
</div>
</p>

<p>this second one is for the outside images to appear inside the div </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var inputLocalFont = document.getElementById("file1");
inputLocalFont.addEventListener("change", previewImages, false);

function previewImages() {
  var fileList = this.files;

  var anyWindow = window.URL || window.webkitURL;

  for (var i = 0; i &lt; fileList.length; i++) {
    var objectUrl = anyWindow.createObjectURL(fileList[i]);
    var imgEl = $('&lt;img src="' + objectUrl + '" width="75" height="85"/&gt;');
    $('&lt;div class="preview-area"/&gt;').append('&lt;a class="remove-img"&gt; &amp;times; &lt;/a&gt;').append(imgEl).appendTo('.container5')
      .draggable();
    //^ change to this
    imgEl.load(function() {
      $(this).resizable();
    });
    window.URL.revokeObjectURL(fileList[i]);
  }


}
$('.container').on('click', '.remove-img', function(e) {
  e.stopPropagation();
  var parent = $(this).parents('.preview-area');
  parent.find('img').resizable('destroy');
  parent.draggable('destroy').remove();
});</code></pre>
</div>
</div>
</p>

<p>will it be possible to make the outside image appear when i download the div into desktop?</p>