Question

我正在尝试使用html2canvas捕获bing地图的屏幕截图。从我所看到的，我需要使用代理来捕获外部图像。 I see this suggested use.但我真的没有看到任何关于它如何被使用的建议（如例子）。有人有例子吗？我正在使用最新版本的承诺。谢谢！

Answer 1

您好，我正在处理此问题，在我的情况下，地图可以完美运行，用于配置代理，只需在html2canvas脚本中添加以下行即可：

        function makeScreenshot()
        {
            html2canvas(document.getElementById("bingMap"), {
                proxy:'', 
                type: 'view',
                logging: true, 
                userCORS: true,
                ignoreElements:(showDashboard)=>{return false}, 
                Timeout:(5000)
            })
            .then(canvas =>
            {
                canvas.id = "canvasID";
                var main = document.getElementById("main");
                //while (main.firstChild) { main.removeChild(main.firstChild); }
                setTimeout(function(){main.appendChild(canvas);},5000);
            });
        }

        document.getElementById("a-make").addEventListener('click', function()
        {
            document.getElementById("a-make").style.display = "none";
            makeScreenshot();
            document.getElementById("a-download").style.display = "inline";
        }, false);

        document.getElementById("a-download").addEventListener('click', function()
        {
            this.href = document.getElementById("canvasID").toDataURL();
            this.download = "canvas-map.png";
        }, false);

在bing映射的脚本中，“代理”可以为空白，也可以读取为（html2canvas php proxy），您需要启用CORS：

    var loc = new Microsoft.Maps.Location(urlatmap, urlngmap)
    mapOptions = {
        credentials: bingkey,
        center: loc,
        zoom: 16,
        mapTypeId: Microsoft.Maps.MapTypeId.aerial,
        showDashboard: false,
        enableCORS: true//for canvas img
    }

如何使用html2canvas代理（最新版本）

1 个答案: