html2canvas einige arbeiten einige keine

Question

ich ein Problem habe, und ich don `t verstehen .. absolute ..

Also habe ich versucht html2canvas.js zu verwenden. Ich möchte HTML img rendern. Der Inhalt ist modal. Bis hier keine Probleme. Wenn ich versuche, diesen Bereich zu rendern, was ich will, ist die toDataUrl() leer. Aber wenn ich versuche, eine einfache Schaltfläche zu rendern, funktioniert es!

Beide sind in einem Modal. Mein Code:

 <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

Legen Sie Ihr Skript in

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

Oder Sie könnten versuchen, mit

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)