在桌面上保存div作为图像

Question

我似乎无法下载html2canvas到我的桌面，当他们是其他图像在div为什么不能我与其他图像下载html2canvas图像？

如果您无法确定我刚才所说的内容，请访问此页面进行测试，也可随时提出更多问题，谢谢。 https://torcdesign.com/sis/我不断收到此错误（未捕获的（以诺）抛出：DOMException：无法执行对“HTMLCanvasElement” toDataURL“：被污染的画布不得出口）

var download = document.getElementById("download"), 
 
\t \t result = document.getElementById("previewImage"); 
 

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

 
function downloadImage() { 
 
\t \t 
 
} 
 

 
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> 

我希望它有助于你..