html2canvas一些正在一些没有

Question

我有一个问题，我不`吨明白..绝对..

于是，我就用html2canvas.js。我想呈现HTML到IMG。内容是模态的。直到这里没有任何问题。 当我尝试渲染该区域时，我想要toDataUrl()为空。 但是，当我尝试渲染一个简单的按钮，它的工作！

两者都在Modal。我的代码：

 <div class="modal-body "> 
     <div class="print" id="printDiv"> 
      <div class="rows nopm"> 
       <div class="full"> 
        <div class="head"> 
         Make & Model 
        </div> 
        <div class="data"> 
         {{$data['make']}} {{$data['model']}} 
        </div> 
       </div> 
      </div> 
      <div class="rows nopm"> 
       <div class="half"> 
        <div class="head"> 
         <img src="{{asset('img/vehicle_icon/age.png')}}"> Age 
        </div> 
        <div class="data"> 
         {{Carbon\Carbon::parse($data['age'])->format('m/Y')}} 
        </div> 
       </div> 
       <div class="half"> 
        <div class="head"> 
         <img src="{{asset('img/vehicle_icon/enginesize.png')}}"> Engine Size 
        </div> 
        <div class="data"> 
         {{$data['eng_size']}} 
        </div> 
       </div> 

       <div class="half"> 
        <div class="head"> 
         <img src="{{asset('img/vehicle_icon/vrt.png')}}"> VRT 
        </div> 
        <div class="data"> 
         {{Carbon\Carbon::parse($data['vrt_date'])->format('m/Y')}} 
        </div> 
       </div> 

       <div class="half"> 
        <div class="head"> 
         <img src="{{asset('img/vehicle_icon/power.png')}}"> Power 
        </div> 
        <div class="data"> 
         {{$data['eng_hp']}}PS ({{$data['eng_kw']}}KW) 
        </div> 
       </div> 

       <div class="half"> 
        <div class="head"> 
         <img src="{{asset('img/vehicle_icon/roadlicence.png')}}" > Road tax 
        </div> 
        <div class="data"> 
         {{$data['vrt_price']}} 
        </div> 
       </div> 

       <div class="half"> 
        <div class="head"> 
         <img src="{{asset('img/vehicle_icon/fuel.png')}}" > Fuel 
        </div> 
        <div class="data"> 
         {{$data['fuel']}} 
        </div> 
       </div> 

       <div class="half"> 
        <div class="head"> 
         <img src="{{asset('img/vehicle_icon/mileage.png')}}" > Mileage 
        </div> 
        <div class="data"> 
         {{$data['mileage']}} 
        </div> 
       </div> 

       <div class="half"> 
        <div class="head"> 
         <img src="{{asset('img/vehicle_icon/transmission.png')}}"> Transmission 
        </div> 
        <div class="data"> 
         {{$data['trans']}} 
        </div> 
       </div> 
      </div> 
      <div class="rows nopm"> 
       <div class="quatrohead"> 
        Extras 
       </div> 
       <div class="quatro"> 
        @foreach($data_extra as $extra) 
         @if ($loop->last) 
          {{$extra}} 
         @else 
          {{$extra}}, 
         @endif 
        @endforeach 
       </div> 
       <div class="quatrohead"> 
        Price 
       </div> 
       <div class="quatroless"> 
        &euro;{{$data['price']}} 
       </div> 
      </div> 
     </div> 
     </div> 
     <div id="targetCanvas"> 
     <img class="imageCanvas" src=""> 
     </div> 
     <div class="modal-footer "> 
     <button type="button" class="btn btn-default" data-dismiss="modal" >Close</button> 
     <button type="button" class="btn btn-default" id="print">Print</button> 
     </div> 
    </div> 
    </div> 
</div> 
    <script> 
    $('#printModal').on('shown.bs.modal', function (e) { 
       html2canvas($('#print'), { //like that its working ,with #printDiv no 
        onrendered: function (canvas) { 
         theCanvas = canvas; 
         console.log(theCanvas.toDataURL()); 

         document.querySelector('.imageCanvas').src = theCanvas.toDataURL(); 

        } 
       }); 

}) 

Answer 1

将您在

$(window).load(function(){ 
     //Your script here 
}) 

或脚本，你可以尝试用

setTimeout(function(){ 
     html2canvas($('#print'), { //like that its working ,with #printDiv no 
     onrendered: function (canvas) { 
     theCanvas = canvas; 
     console.log(theCanvas.toDataURL()); 
     document.querySelector('.imageCanvas').src = theCanvas.toDataURL(); 
     } 
    }); 
    },1000)