谷歌地图屏幕截图不适用于使用html2canvas的标记和标记群集

2024-03-28 09:04:40 发布

您现在位置:Python中文网/ 问答频道 /正文

我正在使用flask做python项目,我使用googlemapapi在项目中显示地图。我实现了html2canvas脚本来成功捕获映射。但我在地图上也有它没有捕捉到的标记。所以我试着用html2canvasPythonProxy 下面是我的模板gpsDataMap的javascript文件片段:

$(window).load(function(){
      $('#saveMap').click(function(){
          html2canvas(document.getElementById('map'), {
             "logging": true, //Enable log (use Web Console for get Errors and Warnings)
             "proxy":"/surveyApp/gpsDataMap/html2canvas-proxy",
             useCORS:true,
             "onrendered": function(canvas) {
              var img = new Image();
             img.onload = function() {
             img.onload = null;
             document.body.appendChild(img);
           };
            img.onerror = function() {
            img.onerror = null;
            if(window.console.log) {
               window.console.log("Not loaded image from canvas.toDataURL");
                  } else {
            alert("Not loaded image from canvas.toDataURL");
               }
              };
                img.src = canvas.toDataURL("image/png");
               }
            });

        });
    });

以及我的python代码片段:

^{pr2}$

这是我的主.py脚本:

from app import app, db


from auth import *
from admin import admin
from model import *
from view import *
from filters.user_privilege import check_privilege
from filters.form_filter import filter_type

# custom filters
app.jinja_env.filters['check_privilege'] = check_privilege
app.jinja_env.filters['filter_type'] = filter_type


from surveyApp import surveyApp_module
app.register_blueprint(surveyApp_module, url_prefix='/surveyApp')

from view.accounts.login import login_module
app.register_blueprint(login_module)


if __name__ == '__main__':
    app.run(port=5555)

在这样做的同时,我的控制台中有以下内容:

html2canvas: Preload starts: finding background-images html2canvas.js:21
html2canvas: Preload: Finding images html2canvas.js:21
html2canvas: Preload: Done. html2canvas.js:21
html2canvas: start: images: 1 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 2 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 3 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 4 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 5 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 6 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 7 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 8 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 9 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 10 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 11 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 12 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 13 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 14 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 15 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 16 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 17 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 18 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 19 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 20 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 21 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 22 / 23 (failed: 0) html2canvas.js:21
GET http://127.0.0.1:5555/home/bhim/app/surveyApp_bhim/images/a0af53c02bd2f2aed37f1d895edcf3485117c512.png 404 (NOT FOUND) html2canvas.js:2249
html2canvas: start: images: 23 / 23 (failed: 1) html2canvas.js:21
Finished loading images: # 23 (failed: 1) html2canvas.js:21
html2canvas: Error loading background: html2canvas.js:21
html2canvas: Renderer: Canvas renderer done - returning canvas obj 

更新: 调试器结果:

folder => images,
timeout => 30,
mimetype => application/javascript,
ua => Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:29.0) Gecko/20100101 Firefox/29.0,
host => 127.0.0.1:5555,
scheme => http,
ref => ,
url => http://www.google.com,
callback => console.log,
default_callback => console.log,
status => 0,
routePath => /static/images/,
savePath => /home/bhim/app/surveyApp_bhim/static/images/,
prefix => htc_,
real_extension => ,
mimes => ['image/bmp', 'image/windows-bmp', 'image/ms-bmp', 'image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'text/html', 'application/xhtml', 'application/xhtml+xml']

更新谷歌地图图片截图

Google Map view that need to be capture ScreenShot of Map by html2canvaspythonproxy 标记未被捕获。在


Tags: fromimageimportlogappimgjsfunction
3条回答

1)使用useCORS:true或使用proxy,切勿同时使用这两个。在

2)您的路线不同,请参见:

  • virtual_path = '/gpsDataMap/images/'

  • @surveyApp_module.route('/gpsDataMap/html2canvas/images/<image>')

3)您的代理路由似乎是错误的(在您的Javascript中):

  • "proxy":"/surveyApp/gpsDataMap/html2canvas-proxy",

  • @surveyApp_module.route('/gpsDataMap/html2canvas-proxy')


您没有意识到所有的错误,为什么userCORS与“PROXY”混淆了。在

修复所有路由(路由是它们的虚拟路径)并修复javascript(不要使用userCORS:),请参阅:

$(window).load(function(){
    $('#saveMap').click(function(){
        html2canvas(document.getElementById('map'), {
                "logging": true, //Enable log (use Web Console for get Errors and Warnings)
                //useCORS:true, "COMMENTED", remove useCORS
                "proxy": YOUR_FIXED_ROUTE,
                "onrendered": function(canvas) {
                    var img = new Image();
                    img.onload = function() {
                        img.onload = null;
                        document.body.appendChild(img);
                    };

                    img.onerror = function() {
                        img.onerror = null;
                        if(window.console.log) {
                            window.console.log("Not loaded image from canvas.toDataURL");
                        } else {
                            alert("Not loaded image from canvas.toDataURL");
                        }
                    };
                    img.src = canvas.toDataURL("image/png");
                }
        });
    });
});

看,这是一条混合了“routes”的绝对路径:

GET http://127.0.0.1:5555/home/bhim/app/surveyApp_bhim/images/a0af53c02bd2f2aed37f1d895edcf3485117c512.png 404 (NOT FOUND) html2canvas.js:2249

任何原因的代理响应路径都是错误的,请使用以下方法:

1)编辑代码,如下所示:

^{pr2}$

2)在浏览器中运行:

http://127.0.0.1:5000/gpsDataMap/html2canvas-proxy?callback=console.log&url=http://www.google.com&debug_vars=1

3)获取结果并在你的任务中发布。在

保存标记(html2canvas的解决方法):

(来源1):http://humaan.com/custom-html-markers-google-maps/
(来源2):http://jsfiddle.net/BCr2B/99/

实现自己的标记很快而且非常简单,这样就可以避免被污染的问题。在

function HTMLMarker(lat, lng, col) {
    this.lat = lat;
    this.lng = lng;
    this.col = col;
    this.pos = new google.maps.LatLng(lat, lng);
}

HTMLMarker.prototype = new google.maps.OverlayView();
HTMLMarker.prototype.onRemove = function() {}
HTMLMarker.prototype.onAdd = function() {}
HTMLMarker.prototype.draw = function() {
    var self = this;
    var div = this.div;

    if(!div) {
        div = this.div = document.createElement('div');
        div.className = 'marker';
        div.style.position = 'absolute';
        div.style.width = '32px';
        div.style.height = '32px';

        switch(this.col) {
            case "green":
                div.innerHTML = '<img src="/images/green-dot.png">';
                break;
            case "yellow":
                div.innerHTML = '<img src="/images/yellow-dot.png">';
                break;
            case "red":
                div.innerHTML = '<img src="/images/red-dot.png">';
                break;
        }

        var panes = this.getPanes();
        panes.overlayImage.appendChild(div);
    }


    var position = this.getProjection().fromLatLngToDivPixel(this.pos);
    div.style.left = position.x - 16 + "px";
    div.style.top = position.y - 32 + "px";
}

然后再加上:

^{pr2}$

以这种方式导出时,地图标记将成功添加,因为它们来自本地源。在

请先试试这个可能对你有用。在

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 
<script type="text/javascript" src ="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="html2canvas.js?rev032"></script> 



<script type="text/javascript">

function initialize()
    {
    var mapProp = {
          center:new google.maps.LatLng(51.508742,-0.120850),
          zoom:5,
          mapTypeId:google.maps.MapTypeId.ROADMAP
      };
    var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}

google.maps.event.addDomListener(window, 'load', initialize);

 $(window).load(function(){

    $('#load').click(function(){

            html2canvas($('#googleMap'), {
            useCORS: true,
                onrendered: function (canvas) {
                var dataUrl= canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

                window.location.href = dataUrl;
                                    }
            });

    });
});
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
<input type="button" value="Save" id="load"/>
</body>

相关问题 更多 >