如何在最新版html2canvas中使用代理？求必应地图截图示例

阿华AIGC实验室

2026-5-25

Using html2canvas with a Proxy to Capture Bing Maps Screenshots

Hey there! I totally get the frustration when you're trying to capture Bing Maps with html2canvas and hit that external image snag—proxy setup can feel a bit opaque without concrete examples. Let me walk you through a working example using the latest Promise-based version of html2canvas.

First, Understand the Problem

html2canvas can't load cross-origin resources (like Bing Maps tile images from their domain) directly due to browser CORS policies. A proxy acts as a middleman: it fetches the external images on your behalf and serves them to html2canvas as same-origin resources.

Step 1: Set Up a Simple Node.js Proxy Server

We'll use Express and http-proxy-middleware to create a lightweight proxy. If you don't have Node.js installed, grab it first, then follow these steps:

Create a new folder, initialize a project:

npm init -y

Install dependencies:

npm install express http-proxy-middleware

Create a proxy-server.js file with this code:

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();

// Proxy configuration for Bing Maps tile domains
const bingProxy = createProxyMiddleware('/bing-tiles', {
  target: 'https://t.ssl.ak.dynamic.tiles.virtualearth.net',
  changeOrigin: true,
  pathRewrite: {
    '^/bing-tiles': '' // Strip the /bing-tiles prefix when forwarding the request
  },
  headers: {
    // Add any necessary headers here (like user-agent) to mimic browser requests
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36'
  }
});

app.use(bingProxy);

// Serve your static frontend files (if needed)
app.use(express.static('public'));

// Start the server on port 3000
app.listen(3000, () => {
  console.log('Proxy server running on http://localhost:3000');
});

Step 2: Frontend Code with html2canvas

Create a public folder in your project, then add an index.html file with this code. We'll initialize Bing Maps and set up html2canvas to use our proxy:

<!DOCTYPE html>
<html>
<head>
  <title>html2canvas Bing Maps Capture</title>
  <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
  <!-- Load Bing Maps SDK -->
  <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=YOUR_BING_MAPS_KEY'></script>
  <style>
    #map {
      width: 800px;
      height: 600px;
      border: 1px solid #ccc;
    }
    #screenshot {
      margin-top: 20px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <h1>Capture Bing Maps with html2canvas</h1>
  <div id="map"></div>
  <button id="captureBtn">Capture Screenshot</button>
  <img id="screenshot" alt="Captured map">

  <script>
    let map;

    // Initialize Bing Maps
    function loadMap() {
      map = new Microsoft.Maps.Map('#map', {
        credentials: 'YOUR_BING_MAPS_KEY',
        center: new Microsoft.Maps.Location(47.6062, -122.3321), // Seattle coordinates
        zoom: 12
      });
    }

    // Capture function using html2canvas
    document.getElementById('captureBtn').addEventListener('click', async () => {
      try {
        const mapElement = document.getElementById('map');
        
        // Configure html2canvas to use our proxy for external images
        const canvas = await html2canvas(mapElement, {
          useCORS: true,
          proxy: 'http://localhost:3000/bing-tiles', // Point to our proxy endpoint
          logging: true, // Optional: enable logging to debug issues
          allowTaint: false // Keep this false to avoid security issues
        });

        // Display the captured screenshot
        const screenshotImg = document.getElementById('screenshot');
        screenshotImg.src = canvas.toDataURL();
      } catch (error) {
        console.error('Capture failed:', error);
        alert('Failed to capture the map. Check console for details.');
      }
    });

    // Load the map when the page is ready
    Microsoft.Maps.loadModule('Microsoft.Maps.Map', loadMap);
  </script>
</body>
</html>

Important Notes:

Replace YOUR_BING_MAPS_KEY with your actual Bing Maps API key (you can get one from the Bing Maps Dev Center).
The proxy targets Bing Maps' tile domain (t.ssl.ak.dynamic.tiles.virtualearth.net)—if Bing changes their tile URLs, you'll need to update this in the proxy config.
Make sure your frontend is served from the same origin as the proxy (in this example, http://localhost:3000) to avoid CORS issues with the proxy itself.

Step 3: Run the Setup

Start the proxy server:

node proxy-server.js

Open your browser and go to http://localhost:3000
Click the "Capture Screenshot" button—you should see the captured map image below the map.

Troubleshooting Tips:

If tiles aren't loading in the screenshot, check the browser console for proxy errors. Make sure the proxy is correctly forwarding requests to Bing's tile domain.
Ensure your Bing Maps key is valid and has the necessary permissions.
If you're using a different backend (not Node.js), the proxy logic will be similar—you just need to create an endpoint that forwards requests to Bing's tile servers and returns the response.

内容的提问来源于stack exchange，提问作者Michael Witt