可用开发者工具导出Canvas图片：先在Elements中确认存在<canvas>标签，再在Console执行toDataURL获取Base64，最后通过地址栏粘贴或JS下载方式保存为PNG；动态内容需画面稳定后操作，高DPI屏幕需先缩放Canvas再重绘导出。
你需要把网页里用Canvas动态绘制的图片保存下来，比如在线签名、实时图表或游戏截图，但右键菜单找不到“另存为”选项，常规截图又不够清晰。
确认Canvas元素是否存在
按 F12 打开开发者工具 → 切换到 Elements 面板 → 按 Ctrl+F（Windows）或 Cmd+F（Mac）搜索 <canvas → 查看是否高亮定位到一个或多个 <canvas> 标签。如果没有结果，说明页面未使用Canvas，本方法不适用。
在控制台中导出Base64图像数据
切换到 Console 面板 → 输入以下代码并回车：
document.querySelector('canvas').toDataURL('image/png')
如果页面有多个Canvas，用 document.querySelectorAll('canvas')[0] 替换 document.querySelector('canvas')，其中 [0] 改为对应索引（从0开始），例如第二个Canvas就写 [1]。执行后控制台会输出一长串以 data:image/png;base64, 开头的文本——这就是图像的Base64编码。
将Base64数据转为可下载的PNG文件
方法一：使用浏览器地址栏快速下载
复制上一步得到的完整Base64字符串 → 在新标签页的地址栏中粘贴 → 回车 → 浏览器会直接渲染图像 → 右键→“另存为”即可保存为PNG。注意：部分新版Chrome对超长Base64 URL有长度限制，若页面空白或报错，请改用方法二。
方法二：通过JavaScript触发下载
在Console中粘贴并执行以下代码（替换其中的 YOUR_BASE64_STRING 为实际获取到的完整Base64字符串，保留 data:image/... 前缀）：
const a = document.createElement('a'); a.href = 'YOUR_BASE64_STRING'; a.download = 'canvas-export.png'; document.body.appendChild(a); a.click(); document.body.removeChild(a);
这行代码会自动触发下载，文件名为 canvas-export.png。如果Canvas内容是动态更新的（如实时仪表盘），务必在目标画面稳定后再执行，否则可能截取到中间帧或空白。
处理高DPI屏幕下的模糊问题
若导出的图像边缘发虚、文字锯齿明显，大概率是Canvas未适配设备像素比。此时需先修正画布分辨率再导出：
在Console中依次执行以下三行（假设目标Canvas是第一个）：
① const canvas = document.querySelector('canvas');
② const dpr = window.devicePixelRatio || 1; canvas.width = canvas.clientWidth * dpr; canvas.height = canvas.clientHeight * dpr; const ctx = canvas.getContext('2d'); ctx.scale(dpr, dpr);
③ canvas.toDataURL('image/png')
第②步会重设Canvas内部绘图缓冲区尺寸并缩放上下文，【必须在重设后立即重绘一次内容，否则导出仍是空白或旧画面】。若页面未暴露重绘函数，此法可能失效，需结合具体网页逻辑调用其内部渲染方法。
