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

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

“代理”可以为空白，或读取为（html2canvas php proxy），在bing映射的脚本中，您需要启用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
    }