Google Map screen capture is not working for marker and marker cluster using html2canvas

Question

I am doing python project using flask where I used google map api to show the map in the project. I implement html2canvas script to capture the map successfully. But I hav

Answer 1

1) Use useCORS:true or use proxy, never use both at the same time.

2) Your routes are different, see:

• virtual_path = '/gpsDataMap/images/'

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

3) Your proxy route, seems to be wrong (in your Javascript):

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

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

---

You do not realize all errors, why the userCORS with the "PROXY" get confused.

Fix all routes (routes are their virtual paths) and fix your javascript (don't use userCORS:), see:

$(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");
                }
        });
    });
});

---

See, this is absolute path mixed with "routes":

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

The route of proxy response for any reason is wrong, use this:

1) Edit your code, like this:

@surveyApp_module.route('/gpsDataMap/html2canvas-proxy')
def html2canvas_proxy():
    print ("is this proxy really calling ");
    h2c = html2canvasproxy(request.args.get('callback'), request.args.get('url'))
    h2c.userAgent(request.headers['user_agent'])

    if request.referrer is not None:
        h2c.referer(request.referrer)

    if request.args.get('debug_vars'): #Added
        return Response((',\n'.join(h2c.debug_vars())), mimetype='text/plain') #Added

    h2c.route(real_path, virtual_path)

    r = h2c.result()
    return Response(r['data'], mimetype=r['mime'])

2) Run in browser:

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

3) Get results and post in your queston.