saving div as image in desktop

Question

i cant seem to download html2canvas to my desktop when their are other images in div why cant i download html2canvas image with other images?

if you have trouble undestanding what i just said please visit this page to test it out also feel free to ask more questions thank you. https://torcdesign.com/sis/ i keep getting this error (Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.)

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

Answer 1

Here is the answer...

Just copy and past it..

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script src="https://files.codepedia.info/uploads/iScripts/html2canvas.js"></script>
<div id="firstshirt" class="container" style="float:left;">
    <center>
        <div id="wrapper">
            <div id="boxes" class="container5" style="float:center;">
                <div data-bind="foreach:items" class="fix_backround">
                    <div class="item" data-bind="draggable:true,droppable:true"></div>
                </div>
                <img id="img1" src="https://torcdesign.com/shirts/brown.jpg">
                <img id="output" class="out-put-img" style="position: absolute;top: 100px;right: 108px" height="80px" width="80px">
                <a href="" download><span id="image" class="preview-area"></span></a>
                <div id="fotos" >
                    <img class="modal-content" id="imgdisplay" />
                </div>
            </div>
        </div>
    </center>
    <br><br><br><br>
</div>
<div style='display:none;' id="mtsm">
    <div class="colore black active" data-image="https://torcdesign.com/shirts/black.jpg"></div>
</div>
<input id="btn-Preview-Image" type="button" value="Preview"/>
<a id="download" download="my_image.png" href="#">Download image</a>
<select id="imajes">
    <option value="">Choose Image</option>
    <option value="new-upload">Upload Image</option>
    <option value="dog">Dog</option>
</select>
<div class="file-upload-wrapper">
    <input type="file" class="upload-img" name="upload-new-img" id="upload-img"   />
    <!--<img id="output" height="80px" width="80px">-->
</div>

<script>
    // External added
    jQuery(download).ready(function () {
        jQuery(".file-upload-wrapper").hide();
        jQuery(".out-put-img").hide();
        jQuery("#imajes").change(function () {
            var selected = jQuery('#imajes').val();
            if (selected == "new-upload") {
                jQuery(".file-upload-wrapper").show();
            } else {
                jQuery(".file-upload-wrapper").hide();
            }
        });

        //File
        function readURL(input) {

            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    jQuery(".out-put-img").show();
                    $('#output').attr('src', e.target.result);
//                   / $('.append-img').append('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        jQuery("#upload-img").change(function () {
            readURL(this);
        });
    });
</script>

<select id="dog" name="subselector" class="subselector" style="display:none">
    <option value="">Choose an item</option>
    <option value="bulldog">Bulldog</option>
</select>
<div style='display:none;' id="bulldogimges" class="smallimages">
    <div class="imgcontainerss" data-image="https://torcdesign.com/clipart/pT78gE6pc.gif">
        <img src="https://torcdesign.com/clipart/pT78gE6pc.gif" alt="Smiley face" width="55" height="55">
    </div>
    <div class="imgcontainerss" data-image="https://torcdesign.com/clipart/LiKkRqkeT.gif">
        <img src="https://torcdesign.com/clipart/LiKkRqkeT.gif" alt="Smiley face" width="55" height="55">
    </div>
</div>
<h3>result:</h3>
<div>
    <div id="previewImage"></div>
</div>
<script>
    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
    $(document).ready(function () {
        $('#imajes').change(function () {
            $('.subselector').hide();
            $('.smallimages').hide();
            $('#' + $(this).val()).show();
        });
        $('.smallimages').hide();
        var id = $(this).attr('id');
        var val = $(this).val();
        $('#dog').on('change', function () {
            $("#bulldogimges").css('display', (this.value == 'bulldog') ? 'block' : 'none');
        });
        $('img').on('click', function () {
            $('#fotos').append('<div class="imgdrag"><img class="modal-content" src="' + $(this).attr('src') + '"/></div>');
            $('.imgdrag').draggable();
            $('#fotos').droppable();
            $('.modal-content').resizable();
        });
    });
</script>

<style>
    .container {background-color: transparent;
                width: 300px;
                height: 300px;
                border: 2px solid;
                position: relative;
                overflow: hidden;

                /* Will stretch to specified width/height */
                background-size: 490px 500px;
                background-repeat: no-repeat;
    }
</style>

I hope its helpful to you..