Javascript html2canvas一些正在工作一些没有

我有个问题，我不明白。。绝对的

所以我尝试使用

html2canvas.js

。我想把html呈现给img。内容是模态的。直到这里没有任何问题。 当我试图呈现我想要的区域时，

toDataUrl（）

为空。 但是当我尝试渲染一个简单的按钮时，它就工作了

两者都处于

模式

。我的代码：

     <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();

                    }
                });

})

品牌与模型
{{$data['make']}{{$data['model']}
年龄
{{Carbon\Carbon:：parse（$data['age']）->格式（'m/Y'）}
发动机尺寸
{{$data['eng_size']}
VRT
{{Carbon\Carbon:：parse（$data['vrt_date']）->格式（'m/Y'）}
权力
{{$data['eng_hp']}}PS（{{$data['eng_kw']}}kw）
道路税
{{$data['vrt_price']}
燃料
{{$data['fuel']}
里程
{{$data['MILENGE']}
传输
{{$data['trans']}
额外费用
@foreach（$data_额外为$extra）
@如果（$loop->last）
{{$extra}}
@否则
{{$extra}}，
@恩迪夫
@endforeach
价格
&欧元；{{$data['price']}
接近
印刷品
$（'#printmodel'）.on（'show.bs.modal'，函数（e）{
html2canvas（$（'#print'），{//就像它的工作原理一样，带有#printDiv no
onrendered：函数（画布）{
画布=画布；
log（canvas.toDataURL（））；
document.querySelector（'.imageCanvas'）.src=theCanvas.toDataURL（）；
}
});
})

将脚本放入

$(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)

将脚本放入

$(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)

---

Uncaught TypeError:a.indexOf不是一个函数

error现在您应该将脚本标签中的完整脚本放入窗口。加载

data:，

相同的情况。相同的html，如果您将其放在模式的外侧。它起作用了吗？如果是，

位置：相对；显示：块到你的divYes，就像那样工作，只是没有图像：）空的透明图像，只有html得到更高的高度。：）<代码>未捕获类型错误：a.indexOf不是一个函数

错误现在您应该将脚本标记内的完整脚本放入窗口。加载

数据：，

相同的情况。相同的html，如果您将其放在模式的外侧。它起作用了吗？如果是，

位置：相对；显示：块到你的divYes，就像那样工作，只是没有图像：）空的透明图像，只有html得到更高的高度。：）