Html2canvas - 在 phonegap 应用程序中捕获谷歌地图到图像答案

【问题标题】：Html2canvas - capture google map to image in phonegap applicationHtml2canvas - 在 phonegap 应用程序中捕获谷歌地图到图像
【发布时间】：2023-03-07 05:24:01
【问题描述】：

我想捕捉谷歌地图并覆盖到图像以供将来使用。我刚刚尝试使用 html2canvas，例如

 html2canvas($('#map'), {
                        useCORS: true,
                        onrendered: function(canvas) {
                           document.body.appendChild( canvas );
                        }
 });

这在 chrome 和 FF 等桌面浏览器上运行良好。但是在 phonegap 应用程序中，它只是使用地图缩放按钮等创建图像。但是缺少地图图块。只有地图控件在那里。

【问题讨论】：

标签： jquery html cordova html2canvas

【解决方案1】：

这是我用过的函数：

function convertasbinaryimage() {
    html2canvas(document.getElementById("map"), {
        useCORS: true,

        onrendered: function (canvas) {

            var img = canvas.toDataURL("image/png");

            img = img.replace('data:image/png;base64,', '');

            var finalImageSrc = 'data:image/png;base64,' + img;

            $('#googlemapbinary').attr('src', finalImageSrc);

        }
    });
}

【讨论】：

【解决方案2】：

知道了.. :)

添加allowTaint:true

html2canvas($('#map'), {
                        useCORS: true,
                        allowTaint:true,
                        onrendered: function(canvas) {
                           document.body.appendChild( canvas );
                        }
 });

【讨论】：

首选html2canvas-proxies
那行得通。但是，当我在地图内移动（即，我将其拖到不同的位置）时，画布看起来不完整：screencast.com/t/Py4kyTUkUZI您也遇到过这种情况吗？
@jeudyx 是的，我想我遇到了类似的问题。移动后尝试谷歌地图调整大小功能。不确定。
最后我遵循了这个答案：stackoverflow.com/questions/24046778/… 并解决了我的问题。
酷！感谢您的评论:)