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)

html2canvas有些工作没有

1 个答案: