Question

我正在尝试制作Google地图所在的div元素的“屏幕截图”。我使用html2canvas并且在涉及“常规地图”（在地图上显示带有一个或几个标记的某个位置）时不会遇到任何问题。然而，问题出现在驾驶路线图上 - 将两个点与计算出的路线连接起来的地图。此地图可能不仅仅是一堆图层/图像，而且还使用了负责计算和绘制路线的google DirectionsService和directionsDisplay服务。（当html2canvas尝试重建“图像”时，可能无法在后台完成。）最后，我得到 SecurityError：无法在'HTMLCanvasElement'上执行'toDataURL'：污染的画布可能无法导出

StackOverflow上有几个问题，非常接近这种情况，但它们都没有描述完全相同的情况，也没有提供解决方案。

我知道这个问题的安全背景和CORS原则。分析标题可以找到 Access-Control-Allow-Origin：* 行。此外，每个其他地图都没有任何问题，因此我无法在此处看到此特定问题的根本原因。

另外，据我所知，使用谷歌的静态地图无法覆盖，因为无法将路线绘制到静态地图。

这是代码：

    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

         } 

    });

Answer 1

一些旧的语法和丑陋的代码，但这应该是最终有用的东西......

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包含Google驱动器路线图的div元素的“屏幕截图”

1 个答案: