如何从指定网站导出高分辨率Canvas平面图？

问题概述 #

需下载两个展会Canvas平面图的高清版本，但现有方式均无法获取高分辨率图：

• 直接打开Canvas图片：文字偏小，放大后模糊
• 放大Canvas后保存：仅能得到局部内容
• 使用以下JS代码下载，结果仍为低分辨率：

saveCanvas.toBlob(blob => {
    let a = document.createElement("a"),
        url = URL.createObjectURL(blob);
    a.href = url;
    a.download = "image.png";
    document.body.appendChild(a);
    a.click();
    setTimeout(function() {
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
    }, 0);
});

可行解决方案 #

方案1：修改Canvas像素尺寸并重绘导出 #

1. 打开目标页面，按F12唤起开发者工具，切换至控制台标签
2. 获取页面中的Canvas元素：

   const canvas = window.saveCanvas || document.querySelector('canvas')
   

3. 调整Canvas的实际像素分辨率（示例为放大2倍，可根据需求调整倍数）：

   const scale = 2 // 分辨率放大倍数
   // 先记录原显示尺寸，避免页面布局错乱
   const originalDisplayWidth = canvas.style.width
   const originalDisplayHeight = canvas.style.height
   // 放大Canvas实际像素尺寸
   canvas.width *= scale
   canvas.height *= scale
   // 恢复原显示尺寸，保证页面显示正常
   canvas.style.width = originalDisplayWidth
   canvas.style.height = originalDisplayHeight
   

4. 触发Canvas重绘：若页面存在render/redraw类渲染函数，直接调用；若没有，刷新页面后重复前3步，或手动拖动地图触发视图更新
5. 运行以下代码导出高清图片：

   canvas.toBlob(blob => {
       const a = document.createElement("a")
       const url = URL.createObjectURL(blob)
       a.href = url
       a.download = "high-res-floorplan.png"
       document.body.appendChild(a)
       a.click()
       setTimeout(() => {
           document.body.removeChild(a)
           URL.revokeObjectURL(url)
       }, 0)
   }, 'image/png', 1.0) // 1.0 代表最高导出质量
   

方案2：提取原始高清资源 #

1. 在开发者工具的网络标签中，过滤img或json类型请求，查找地图瓦片、矢量数据或高清原图资源
2. 找到对应资源后，直接下载；若为瓦片地图，可通过工具拼接为完整大图

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