몇 가지 내가 문제가 몇 가지 더

Question

작동하지 html2canvas하고, 이해 돈`t ..

그래서 내가 html2canvas.js을 사용했습니다. img에 html을 렌더링하고 싶습니다. 내용은 모달입니다. 여기까지 아무 문제 없어. 내가 원하는 영역을 렌더링하려고하면 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)