Convert Google Maps with Routes to Image using HTML5 Canvas in ASP.Net

Last Reply 10 months ago By Mudassar

Posted 10 months ago

Hello

I want to convert div content in image.

I am using following code for that

 

function genScreenshot() {
                                    html2canvas(document.getElementById('dvgrid'), {
                                        onrendered: function(canvas) {
                                            $('#box1').html("");
                                            $('#box1').append(canvas);
      
                                            if (navigator.userAgent.indexOf("MSIE ") > 0 || 
                                                          navigator.userAgent.match(/Trident.*rv\:11\./)) 
                                            {
                                                var blob = canvas.msToBlob();
                                                window.navigator.msSaveBlob(blob,'Test file.png');
                                            }
                                            else {
                                                $('#test').attr('href', canvas.toDataURL("image/png"));
                                                $('#test').attr('download','Test file.png');
                                                $('#test')[0].click();
                                            }
      
      
                                        }
                                    });
                                }




 <div id="dvMap" style="width: 900px; height: 500px; overflow: auto;">
                                    </div>
                                    <div id="box1">
                                    </div>


                                    <input type="button" id="btnPrint" value="Print" onclick="genScreenshot();" />

But problem is,it display only route while convert it into image and save as image only contain route. While converting div into image it will not convert while div but display only route in the image.

Please refer following image for that.

https://ibb.co/bSZ4xx

Anyone have any idea about it why it is happen? Please Suggest!!

Posted 10 months ago

Google Maps won't work with Canvas method. It is not possible to create Image of Google Map with Canvas