Question

因此，我尝试通过解码来自移动设备的GPS数据来使用Google地图，然后从中生成地图路线。使用Static Maps API，我可以对旅行进行近似估算，但数据每1-5秒生成一次，远远超出您通过GET请求发送到Google地图的信息量。

所以我的JavaScript地图看起来像这样运行网页：

编辑：DropBox显然不会持久存储照片链接，切换到OneDrive。

哪个是光荣的。我想如果我使用html2Canvas，我可以生成地图的屏幕截图，并将该文件传输到我的服务器的另一部分，或URI编码。但是当我尝试这个时，我得到了这个。

根本不光彩。然后我检查了rasterHTML。但是当我使用rasterizeHTML.drawDocument＆＃34时，它给了我一个错误;无法得到undefined的innerHTML＆＃34;当我调用modalMap时，（参见下面的JavaScript代码）。它允许我使用.innerHTML获取HTML并使用完全相同元素的drawHTML。不知道为什么。使用HTML，我得到了这个结果：

All Three together http://bit.ly/1ssxIet

rasterizeHTML位于右下角。 html2Canvas是左下角。我有点卡在两者之间。

编辑：经过大量测试后，错误是：

html2canvas：加载错误＆＃34;：http://mt0.googleapis.com/vt？...

在控制台中单击图片时，URL会显示图片，但HTML2canvas无法显示图片。我不确定它是否是URL编码问题或者是什么。

我在我的标题，Apache和.htaccess中启用了CORS，以防万一。然后我下载了.php代理文件并尝试了，以防万一是问题所在。都没有奏效。

javascript代码：

 google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
        // Try RasterizeHTML
        var modalMap = document.getElementById('mainPageCanvas');
        var modalMapHTML = modalMap.innerHTML;
        var canvasHolder = document.getElementById('rasterizeHTML');
        console.log(modalMap);
        console.log(canvasHolder);
        var options = {
            width : 1000,
            height : 400,
            executeJs : false,
            zoom: 2
        };

        rasterizeHTML.drawHTML(modalMapHTML, canvasHolder)
        .then(function success(renderResult) {
            console.log(renderResult);

        }, function error(e) {
            console.log(e);

        }.deb());    

        html2canvas(document.getElementById('mainPageCanvas'), {
        proxy: "//localhost:85/ormc/consumer/build/ajax/php/html2canvasproxy.php",
        useCORS: true,
        allowTaint:true,
        logging: true,
        onrendered: function(canvas) {
        canvas.setAttribute('crossOrigin','anonymous');
        $('#secondaryPageCanvas').replaceWith(canvas);
        console.log("Canvas function called");
      }.deb()

        });



   }.deb());

现在，如果我尝试进行dataUrl转换，我会得到：＆＃34; Uncaught SecurityError：无法执行＆＃39; toDataURL＆＃39; on＆＃39; HTMLCanvasElement＆＃39;：可能无法导出受污染的画布。＆＃34;

HTML只是：

<div id="mainPageCanvas" style="width:1000px;height:400px;"></div>
<div id='secondaryPageCanvas' style="width:1000px;height:400px;"></div>
<canvas id='rasterizeHTML' style='width:1000px;height:400px;'>

我发送的标题是：

Access-Control-Allow-Methods:OPTIONS, GET
Access-Control-Allow-Origin:*
Access-Control-Request-Method:*
Cache-Control:no-store, no-cache, must-revalidate, post-check=0, pre-check=0

只是为了查看是否有任何事情触发了CSP（仅限该报告），但没有任何事情可以引发它。那么，我做错了什么？

带有Canvas2HTML的谷歌地图的Bootstrap模态等于灰色背景

0 个答案: