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

【问题标题】：How to use a proxy with html2canvas (latest version)如何在 html2canvas 中使用代理（最新版本）
【发布时间】：2018-09-25 11:45:38
【问题描述】：

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

【问题讨论】：

也许是一个愚蠢的问题，但是：为什么要使用 html2canvas（有页面安全限制）而不是 Web 扩展？（这没有有安全限制，因为用户/您在运行扩展程序时必须接受这种风险）
我必须支持 Chrome、Firefox 和 IE11...
那么你必须遵循这个建议：CSP 的存在是有原因的，所以你必须在我们自己的受信任域上运行自己的代理，这样你就可以让它发送允许的 CSP 标头以一种允许您“截屏”的方式检查 DOM。有非常良好的安全性和隐私性原因说明为什么您不能通过插件/扩展在没有明确用户许可的情况下在任意页面上执行此操作，而解决此问题的唯一方法是控制服务器响应到浏览器，这意味着运行你自己的代理。

标签： javascript html2canvas

【解决方案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
    }

【讨论】：