如何拍摄GMaps框架的截图，并用Javascript将其转换为图像？

我有一个问题，当把谷歌地图的框架，以base64图像，你可以看到下面的框架被保存，但地图没有显示在里面

我想知道为什么它不采取的框架内

JSFiddle：

HTML:

<input type="button" id="btnSave" value="Save PNG"/>
<hr>
<div class="elements" id="map"></div>
<div class="elements" id="img-out"></div>

$("#btnSave").click(function() { 
    html2canvas($("#map"), {
        useCORS: true, #<--- here
        onrendered: function(canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);
            $("#img-out").append(canvas);
        }
    });
});

---

有什么建议吗

您需要做的是在

html2canvas（$（'#id'），{…}中添加
useCORS:true，

useCORS的用途是什么？

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#map"), {
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas); 
                $("#img-out").append(canvas);
                // Clean up 
                //document.body.removeChild(canvas);
            }
        });
    });
}); 

var map = new GMaps({
    div: '#map',
    lat: -12.043333,
    lng: -77.028333
});

跨源资源共享是访问不同域上web资源的标准

JSFiddle:

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#map"), {
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas); 
                $("#img-out").append(canvas);
                // Clean up 
                //document.body.removeChild(canvas);
            }
        });
    });
}); 

var map = new GMaps({
    div: '#map',
    lat: -12.043333,
    lng: -77.028333
});

JavaScript:

<input type="button" id="btnSave" value="Save PNG"/>
<hr>
<div class="elements" id="map"></div>
<div class="elements" id="img-out"></div>

$("#btnSave").click(function() { 
    html2canvas($("#map"), {
        useCORS: true, #<--- here
        onrendered: function(canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);
            $("#img-out").append(canvas);
        }
    });
});

$（“#btnSave”）。单击（函数（）{
html2canvas（$（“#地图”）{
useCORS:true，#您需要做的是在
html2canvas（$（'#id'），{…}）中添加
useCORS:true，

useCORS的用途是什么？

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#map"), {
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas); 
                $("#img-out").append(canvas);
                // Clean up 
                //document.body.removeChild(canvas);
            }
        });
    });
}); 

var map = new GMaps({
    div: '#map',
    lat: -12.043333,
    lng: -77.028333
});

跨源资源共享是访问不同域上web资源的标准

JSFiddle:

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#map"), {
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas); 
                $("#img-out").append(canvas);
                // Clean up 
                //document.body.removeChild(canvas);
            }
        });
    });
}); 

var map = new GMaps({
    div: '#map',
    lat: -12.043333,
    lng: -77.028333
});

JavaScript:

<input type="button" id="btnSave" value="Save PNG"/>
<hr>
<div class="elements" id="map"></div>
<div class="elements" id="img-out"></div>

$("#btnSave").click(function() { 
    html2canvas($("#map"), {
        useCORS: true, #<--- here
        onrendered: function(canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);
            $("#img-out").append(canvas);
        }
    });
});

$（“#btnSave”）。单击（函数（）{
html2canvas（$（“#地图”）{
useCORS:true，#你的小提琴只是抛出了一个错误，Canvas2Image不存在…@CBroe仍然这个问题不是因为这个，我修复了它，仍然存在相同的错误。你的小提琴中的错误仍然相同，我没有看到任何更新。@CBroe Canvas2Image与我的函数没有任何关系，因为它被用来将图像下载到计算机请检查下面我的答案以获得解决方案。我并没有说它与此直接相关……我只是想让您先修复该错误，以便我们可以看到它之后可能抛出的与该问题相关的其他错误/警告（并且受污染的画布通常至少会在控制台中留下警告）您的小提琴只是抛出了一个错误，即Canvas2Image不存在…@CBroe仍然该问题不是因为这个，我已修复它，并且仍然存在相同的错误。您的小提琴中的错误仍然相同，我看不到任何更新。@CBroe Canvas2Image与我的功能无关，因为它用于将图像下载到计算机。请检查我的an请回答下面的问题。我没有说这与此有直接关系……我只是希望您先修复该错误，这样我们就可以看到与该问题相关的其他错误/警告在之后可能抛出（并且受污染的画布通常至少会在控制台中留下警告）