如何在 html2canvas 中使用代理(最新版本)

Question

我正在尝试使用html2canvas捕获必应地图的屏幕截图。据我所知，我需要使用代理来允许捕获外部图像。我看到这个建议的用途。但我真的没有看到任何关于如何使用它的建议(例如一个例子(。有人有例子吗？我正在使用带有承诺的最新版本。谢谢！

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(，在必应地图的脚本中，你需要启用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
    }