解决 html2canvas 导致天地图资源耗尽问题问题背景在使用html2canvas对包含天地图的页面进行截图时发现会重复请求地图瓦片资源导致网络请求数激增地图 API 配额快速耗尽页面性能下降问题原因html2canvas的工作原理是遍历 DOM 树并重新渲染每个元素。当遇到img、canvas等元素时它会尝试重新加载这些资源。天地图使用img标签或 Canvas 来加载瓦片图片当html2canvas遇到这些元素时会重新发起请求加载瓦片而不是直接使用已缓存的资源。解决方案1. 使用ignoreElements过滤地图元素importhtml2canvasfromhtml2canvasconstcanvasawaithtml2canvas(element,{backgroundColor:null,allowTaint:false,// 启用 CORS 支持useCORS:true,// 关键忽略天地图相关元素ignoreElements:(element){returnelement.classList(element.classList.contains(tdt-tile)||element.classList.contains(tdt-overlay-pane)||element.tagNameCANVASelement.parentElement?.classList?.contains(tdt-map-pane))}})2. 参数说明参数作用useCORS: true启用跨域资源共享避免因跨域导致重复请求ignoreElements回调函数返回true表示忽略该元素tdt-tile天地图瓦片元素的 classtdt-overlay-pane天地图覆盖层的 class3. 完整示例template div refcaptureElement !-- 需要截图的内容 -- div classcustom-content自定义内容/div /div /template script setup import { ref } from vue import html2canvas from html2canvas const captureElement ref(null) const captureToImage async () { try { const canvas await html2canvas(captureElement.value, { backgroundColor: null, allowTaint: false, useCORS: true, ignoreElements: (element) { return element.classList ( element.classList.contains(tdt-tile) || element.classList.contains(tdt-overlay-pane) || element.tagName CANVAS element.parentElement?.classList?.contains(tdt-map-pane) ) } }) // 转换为 Base64 const imageData canvas.toDataURL(image/png) return imageData } catch (error) { console.error(截图失败:, error) } } /script其他优化建议1. 避免频繁调用// 使用防抖避免频繁截图import{debounce}fromlodash-esconstdebouncedCapturedebounce(async(){constimageDataawaitcaptureToImage()// 处理图片},300)2. 使用缓存机制constimageCachenewMap()constcaptureToImageasync(key){// 检查缓存if(imageCache.has(key)){returnimageCache.get(key)}constimageDataawaithtml2canvas(element,options)imageCache.set(key,imageData)returnimageData}3. 限制截图区域如果不需要截取整个地图可以先克隆 DOM 并移除地图相关元素constcaptureWithoutMapasync(originalElement){// 克隆元素constcloneoriginalElement.cloneNode(true)// 移除地图容器constmapContainerclone.querySelector(.tdt-map-container)if(mapContainer){mapContainer.remove()}constcanvasawaithtml2canvas(clone,{...options})returncanvas.toDataURL(image/png)}注意事项天地图 API 版本差异不同版本的天地图 class 名称可能不同需要根据实际情况调整测试验证配置后务必测试确保被忽略的元素不影响截图效果性能考虑ignoreElements会对每个元素执行保持回调函数简洁高效跨域问题如果还有跨域问题可能需要在服务器端配置 CORS 响应头总结通过合理配置html2canvas的ignoreElements参数可以有效避免重复加载天地图瓦片资源解决资源耗尽问题。关键是要识别并过滤掉天地图相关的 DOM 元素。关键词: html2canvas, 天地图, 资源耗尽, 截图优化, 前端性能