How to use a proxy with html2canvas (latest version)

Question

I'm trying to capture a screenshot of a bing map with html2canvas. From what I can see I need to use a proxy to allow external images to be captured. I see this suggested use. But I really don't see any suggestion on how it could be used (like an example). Anyone have an example? I'm using the latest version with promises. Thanks!

Perhaps a silly question, but: why use html2canvas (which has page security limitations) instead of a web extension? (which does _not_ have security limitations because the user/you have to accept that risk when running the extension) — Mike 'Pomax' Kamermans, Apr 15 '18 at 21:30
Then you'll have to follow that suggestion: CSP exists for a reason, so you'll have to run your own proxy on our own trusted domain, so you can make it send CSP headers that permit inspecting the DOM in a way that lets you "screenshoot" it. There are **very** good security and privacy reasons for why you are not just allowed to do that on arbitrary pages without explicit user permission through an addon/extension, and the only way around that is to control the server responses to the browser, which means running your own proxy. — Mike 'Pomax' Kamermans, Apr 16 '18 at 05:13

score 0 · Answer 1 · answered Jun 01 '20 at 08:24

Hi im working in this problem, in my situation the map work perfect, for configure the proxy just add this line in the html2canvas script:

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

the "proxy" can be in blank, or read this(html2canvas php proxy), in the script of bing maps u need enable 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
    }

How to use a proxy with html2canvas (latest version)

1 Answers1