HTML2Canvas無法將div轉換爲大圖像的圖像

我正在使用HTML2CANVAS將Div捕捉爲圖像並保存到數據庫。HTML2Canvas無法將div轉換爲大圖像的圖像

它的工作正常與1-2 kb和文本的圖像。但無法捕獲多個和大圖像假設200-300 kb。

如果有人遇到此問題並提供解決方案，請幫助我解決問題。

這裏是我的代碼：

<div id="target"> 
 

 
       <page size="A4"> 
 
<div id="wrapper" > 
 
    <div id="header"> 
 
    <div class="text"> 
 
    <span id="rent">This Space for rent/price</span> 
 
    <h1 id="propAdd">THIS SPACE FOR PROPERTY ADDRESS</h1> 
 
     <h1 id="Data">THIS SPACE FOR DATA</h1> 
 
     </div> 
 
    </div> 
 
    <h1 id="ad"> 
 
     This Space For advert heading</h1> 
 
    <div id="content"> 
 
    <div class="main"> 
 
<div id="dvPreview2"> 
 
    <img src="images/main-image.jpg" width="550" height="355" /> 
 
</div> 
 
     <h1 id="DES">This Space for Property Description or FEATURES</h1> 
 
     <ul> 
 
     <li id="DES1">4 Bedrooms, 3 Bathrooms</li> 
 
     <li id="DES2">Ensuite has double shower & double vanity</li> 
 
     <li id="DES3">Massive open plan living with cathedral ceilings</li> 
 
     <li id="DES4">Resort-style pool deck area</li> 
 
     <li id="DES5">Gourmet kitchen with butlers pantry</li> 
 
     <li id="DES6">Fully ducted air-con</li> 
 
     <li id="DES7">Triple lock-up garage with remote</li> 
 
     <li id="DES8">Outside pets considered on application</li> 
 
     </ul> 
 
    </div> 
 
    <div class="sidebar"> 
 
     <div id="dvPreview3"> 
 
<img src="images/sidebar-image-01.png" width="159" height="100" /> 
 
</div> 
 
      <div id="dvPreview4"> 
 
<img src="images/sidebar-image-02.png" width="159" height="100" /> 
 
</div> 
 
     
 
      <div id="dvPreview5"> 
 
<img src="images/sidebar-image-03.png" width="159" height="100" /> 
 
</div>  
 
<p id="dvPreview1" > 
 
<img src="images/agent-logo.png" style="width:80px;" /></p> 
 
     <p style="margin-top:0 !important;"> 
 
Phone: <span id="phone">+49 30 47373795</span><br /> 
 
E-mail: <span id="mail">[email protected]</span><br /> 
 
      <span id="web">www.abc.in</span> 
 
     </p> 
 

 
    </div> 
 
     
 
     <div class="clear"></div> 
 
     <div class="slid-img"> 
 
      <div id="dvPreview6" > 
 
<img src="images/image-01.jpg" width="159" height="100" /> 
 
</div> 
 
      <div id="dvPreview7" > 
 
<img src="images/image-02.jpg" width="159" height="100" /> 
 
</div> 
 
      <div id="dvPreview8" > 
 
    <img src="images/main-image.jpg" width="159" height="100" /> 
 
</div> 
 
     
 
      <div id="dvPreview9" > 
 
    <img src="images/sidebar-image-01.png" width="159" height="100" style="float:right; margin:0" /> 
 
</div> 
 
     
 
     
 
     </div> 
 
    <div class="clear"></div> 
 
    </div> 
 
    
 
    <div class="affiliation-logo"> 
 
     <ul> 
 
     <li><div id="dvPreview10" style="width:32px;"><img src="images/facebook-icon.png" width="32" /></div></li> 
 
     <li><div id="dvPreview11" style="width:32px;"><img src="images/twitter-icon.png" width="32" /></div></li> 
 
     <li><div id="dvPreview12" style="width:32px;"><img src="images/linkedin-icon.png" width="32" /></div></li> 
 
     <li><div id="dvPreview13" style="width:32px;"><img src="images/youtube-icon.png" width="32" /></div></li> 
 
     <li><div id="dvPreview14" style="width:32px;"><img src="images/google-plus-icon.png" width="32" /></div></li> 
 
     </ul> 
 
     </div> 
 
     <div class="clear"></div> 
 
    <div id="footer"> 
 
    <div class="agent-section"> 
 
    <%-- <div class="agent-name"></div>--%> 
 
      <span class="agent-name" style="float:left"> Disclaimer : </span> 
 
     <div id="DIS" style="max-width:550px; float:left; margin-left:10px; line-height:18px; font-size:14px;"></div> 
 
    </div> 
 
    
 
    
 
<div class="clear"></div> 
 
    </div> 
 
    </div>  
 
</page> 
 

 
      </div> 
 
     
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> 
 
     <script type="text/javascript"> 
 

 
      $(document).ready(function() { 
 
       $('#add_button').click(function() { 
 
        html2canvas($('#target'), { 
 
         onrendered: function (canvas) { 
 
          var img = canvas.toDataURL() 
 

 
          img = img.replace('data:image/png;base64,', ''); 
 
          //alert(img); 
 
          //window.open(img); 
 
          $.ajax({ 
 

 
           type: 'POST', 
 

 
           url: 'Design1.aspx/UploadImage', 
 

 
           data: '{ "imageData" : "' + img + '" }', 
 

 
           contentType: 'application/json; charset=utf-8', 
 

 
           dataType: 'json', 
 
           success: function (msg) { 
 

 
            //alert('Image saved successfully !'); 
 

 
           } 
 

 
          }); 
 
         } 
 
        }); 
 
       }); 
 
      }); 
 

 
    </script>

來源

2015-11-18 Maziksolutions Mzk

舉個例子或展示你目前的工作。 –

我通過編輯問題在我的問題中分享了我的代碼。請檢查並指導我.. –

如果我從頁面中刪除所有圖像，那麼它工作正常。 –