Using html2canvas to Capture Baidu Maps with Overlays – Complete Implementation Guide

The article explains how to capture Baidu Maps with polygon overlays using the html2canvas library. It first introduces the background of dividing a city into regions represented by polygon overlays and the business requirement for a combined map screenshot.

html2canvas Overview

html2canvas(element, options).then(function(canvas) { /* TODO */ });

Demo Setup

Install the library:

npm install html2canvas

HTML container:

<div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color:#000">Hello world!</h4> </div>

JavaScript usage:

import html2canvas from 'html2canvas'; html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas); });

After obtaining the canvas , the toDataURL method can produce a data URI for display or download.

Map and Overlay Capture

For Baidu Maps v3.0 the map tiles are rendered as DOM images, while the GL v1.0 version uses a canvas. The article provides full code for initializing the map, adding city boundaries, and drawing polygon overlays using the Baidu JavaScript API.

Key map initialization (v3.0):

const kemap = new window.BMap.Map('MAP_SHOT_ID'); kemap.centerAndZoom(new window.BMap.Point(116.4777778293003, 40.26420238319829), 9); addCityOverlay('北京市'); drawPolygon();

Overlay drawing example:

const drawPolygon = (map) => { mapData.forEach(item => { const polygon = new window.BMap.Polygon(item.map(i => new window.BMap.Point(i.split(',')[0], i.split(',')[1])), { strokeColor: '#0984F9', fillColor: '#0984F9', fillOpacity: 0.2, strokeWeight: 2 }); map.addOverlay(polygon); }); };

Problem Analysis and Solutions

Two main issues were identified:

Missing map base tiles and logo due to image cross‑origin restrictions. The solution is to enable CORS with useCORS:true (preferred) or allow tainting with allowTaint:true , noting that the latter prevents toDataURL usage.

Missing polygon overlays because they are rendered as SVG elements positioned outside the visible canvas area. The fix uses the onclone option to reset SVG left and top to zero before rendering.

Example onclone handler:

onclone: (target) => { const svgElems = Array.from(target.getElementsByTagName('svg')); for (let svg of svgElems) { svg.style.left = 0; svg.style.top = 0; } return target; }

GL v1.0 Screenshot Options

The GL version provides a built‑in method getMapScreenshot() that returns a base64 image, and it also works with html2canvas when the map is initialized with preserveDrawingBuffer:true to avoid a black screen.

Map instance screenshot example:

const dataURI = kemap.getMapScreenshot(); const img = document.createElement('img'); img.src = dataURI; document.body.appendChild(img);

Downloading the image (canvas or base64) can be done by creating a hidden a element, setting its href to the data URI, and invoking click() :

const link = document.createElement('a'); link.style.display = 'none'; link.href = dataURI; link.download = 'region_map.jpg'; document.body.appendChild(link); link.click(); document.body.removeChild(link);

Summary

For Baidu Maps v3.0, use useCORS:true and an onclone handler to correctly capture both the base map and SVG overlays. For GL v1.0, either the native getMapScreenshot() method or html2canvas (with preserveDrawingBuffer:true ) can be used. Choose the approach based on required features such as 3D effects or overlay complexity.