javascript - 将div保存为桌面上的图像

Question

我似乎无法将 html2canvas 下载到我的 table ​​面，因为它们是 div 中的其他图像，为什么我不能将 html2canvas 图像与其他图像一起下载？

如果您无法理解我刚才所说的内容，请访问此页面进行测试，也可以随时提出更多问题，谢谢。 https://torcdesign.com/sis/我不断收到此错误(未捕获( promise )DOMException:无法在“HTMLCanvasElement”上执行“toDataURL”:受污染的 Canvas 可能无法导出。)

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

这就是答案...

只需复制并粘贴它..

<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>

希望对你有帮助..