html2canvas包含Google驱动器路线图的div元素的“屏幕截图”-Java 学习之路

当html2canvas尝试重建“图像”时，我会在后台完成 . 最后，我得到了 SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

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

我知道这个问题的安全背景和CORS原则 . 分析 Headers 可以找到行 **Access-Control-Allow-Origin: *** . 另外，每个其他 Map 都没有任何问题，所以我在这里看不到这个特定问题的根本原因 .

此外，据我所知，使用谷歌的静态 Map 无法覆盖这一点，因为路线无法绘制到静态 Map .

这是代码：

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 
         }  
    });

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 ) );
        } );
    }

回复于 2024-05-16T04:57:47+08:00

html2canvas包含Google驱动器路线图的div元素的“屏幕截图”

1 回答

相关问题