HTML2Canvas 无法将 div 转换为带有大图像的图像

Question

我正在使用 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">Ject41@cuvox.de</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>        

Answer 1

在第 65 行的 Html2Canvas.js 文件中

更改以下行 /* 最高正符号 32 位浮点值 / /maxInt = 2147483647, // 又名。 0x7FFFFFFF 或 2^31-1

如下 maxInt = Number.MAX_VALUE,

Answer 2

诡计。 设置你的标签，高度是输出图像大小的两倍。