html2canvas "screenshot" of a div element containing Google drive directions map

Question

I'm trying to make a "screenshot" of a div element where a Google map resides. I use html2canvas and do not face any problem when it comes to "regular maps" (displaying some location with with one or a few markers on a map). However, the problem arises with driving directions map - the map that connects two points with the calculated route. This map is probably not just a bunch of layers / images but also uses a google directionsService and directionsDisplay services that are responsible for calculating and drawing the route. (maybe this can't be done in the background when html2canvas try to reconstruct "the image”). Finally, I'm getting SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

There are a several questions on the StackOverflow, pretty close to this case, but none of them describes exactly the same scenario neither solution is provided.

I know security background of this problem and CORS principles. Analysing headers there could be found the line Access-Control-Allow-Origin: *. Also each other map is rendered without any problem, so I can't see here the root cause of this specific problem.

Also, as far as I know, this couldn’t be overridden using Google's static maps because route couldn't be drawn to the static map.

This is the code:

    html2canvas(document.getElementById('map'), { 

        //"proxy": "/html2canvasproxy.php",  //proxy is not used

        "logging": true, 

        "useCORS": true, 

        "onrendered": function (canvas) { 

            var img = new Image(); 

            img.onload = function () { 

                img.onload = null; 

                img.setAttribute('crossOrigin', 'anonymous'); 
                document.getElementById("output").appendChild(img);  
            }; 

            img.src = canvas.toDataURL("image/png");     //error line

         } 

    });

possible duplicate of http://stackoverflow.com/questions/18743166/why-google-maps-and-charts-are-not-supported-by-html2canvas-in-javascript?rq=1 — Mr.Rebot, May 27 '16 at 08:04
Unfortunately, it is not. As I said, I know security background of this problem and CORS principles. Analysing headers there could be found the line Access-Control-Allow-Origin: *. Each other map is rendered without any problem, so I can't see here the root cause of this specific problem. Also you could see in the code option __"useCORS": true__. Please help, this is getting me crazy :) — Oddomir, May 29 '16 at 22:24
Nobody? :) Maybe to try PhantomJS or something else instead of html2canvas? — Oddomir, Jun 05 '16 at 10:59
Did you ever find a resolution to this? I'm running into the exact same issue. — Pascal Bugnion, May 30 '17 at 06:19
@PascalBugnion - I don't remember anymore... I could only tell you that I came to some solution and solve the issue with the html2canvas (didn't introduce any other library/tool) — Oddomir, May 30 '17 at 08:53
@Oddomir can you please share the solution I am also struggling to fix this problem. — Pavan, Jan 21 '18 at 20:08
@WmDev, It was a while ago and I really can't recall that.. I know that I didn't introduce any library beside _html2canvas_ but behaviour was very strange and I'm not sure if I knew even then what exactly was the issue... — Oddomir, Jan 23 '18 at 08:44
@WmDev - pls find below my answer. That should be the method that worked at the end.. — Oddomir, Jan 23 '18 at 08:58

score 0 · Answer 1 · answered Jan 23 '18 at 08:53

Some old syntax and ugly code, but this should be something that worked at the end...

screenShot ( i ) {
        html2canvas( document.getElementById( 'map' + i), {
            "logging": true,
            "useCORS": true
        } ).then( function ( canvas ) {
            var encodedString = canvas.toDataURL( "image/png" );

            // sending encoded base64 image to the server
            googleMaps.$http.post( '/api/screenshots', {
                appraisalId: googleMaps.$data.appraisal_id,
                encodedScreenshot: encodedString,
                tag: 'googlemaps',
                index: i,
            } ).then( function ( response ) {
                googleMaps.setButtonsCaptions();
                console.log( response.data.success );
            }, function ( response ) {
                console.log( response );
                console.log( 'Problem while sending screenshot to the server' )
            }.bind( googleMaps ) );
        } );
    }

html2canvas "screenshot" of a div element containing Google drive directions map

1 Answers1