惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Apple Machine Learning Research
Apple Machine Learning Research
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
G
Google Developers Blog
博客园 - 司徒正美
J
Java Code Geeks
aimingoo的专栏
aimingoo的专栏
A
About on SuperTechFans
博客园 - 三生石上(FineUI控件)
WordPress大学
WordPress大学
T
The Blog of Author Tim Ferriss
D
Docker
大猫的无限游戏
大猫的无限游戏
D
DataBreaches.Net
腾讯CDC
V
Visual Studio Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
C
Check Point Blog
M
MIT News - Artificial intelligence
Jina AI
Jina AI
I
InfoQ
雷峰网
雷峰网
The Cloudflare Blog
美团技术团队
Engineering at Meta
Engineering at Meta

博客园 - wgscd

Git 无法访问 GitHub(unable to access ‘https://github.com/.../.git‘)问题解决教程 RapidOcrNet文字识别OCR C#+Audio绘制麦克风波形 一共免费大模型API AI聊天对话界面的HTML代码。 WPF鼠标拖动改变图片透明度 Fiddler自定义规则保存图片和提示The system proxy was changed自动重连 缩放 div 浏览器语音识别-webkitSpeechRecognition HTML获取摄像头画面,拍照截图保存 JS摄像头手势识别-Handsfree.js HTML,JS 模拟聊天界面UI JS获取元素相对窗口的位置和大小 C# 判断是否安装了ffmpeg shadow-root中的元素定位方法 JS MutationObserver监听DOM元素改变 Webview2动态设置页面video的Blob进行播放 C# 文件分割和文件合并 WPF刮刮乐 JS利用浏览器进行语言识别 WPF设置默认语言地区CultureInfo VS2022推送代码 到github错误: CertGetCertificateChain trust error CERT_TRUST_IS_PARTIAL_CHAIN的解决办法 C#正则表达式匹配候选词 使用ffmpeg去除音频静音
纯JavaScript代码实现保存Canvas图片到电脑
wgscd · 2026-03-26 · via 博客园 - wgscd

以下是纯JavaScript代码实现保存Canvas图片到电脑:

方法一:基础版本(最常用)

// 保存Canvas为PNG图片
function saveCanvasAsImage(canvasId) {
    // 获取canvas元素
    const canvas = document.getElementById(canvasId);
    
    // 将canvas转换为图片数据URL
    const dataURL = canvas.toDataURL('image/png');
    
    // 创建下载链接
    const link = document.createElement('a');
    link.download = 'canvas_image.png'; // 设置下载文件名
    link.href = dataURL;
    
    // 触发下载
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

// 使用示例
saveCanvasAsImage('myCanvas');

方法二:支持PNG和JPEG格式

/**
 * 保存Canvas为图片
 * @param {string} canvasId - canvas元素的ID
 * @param {string} format - 图片格式,'png' 或 'jpeg'
 * @param {number} quality - JPEG画质,0-1之间,默认0.92
 * @param {string} filename - 自定义文件名(可选)
 */
function saveCanvas(canvasId, format = 'png', quality = 0.92, filename) {
    const canvas = document.getElementById(canvasId);
    
    if (!canvas) {
        console.error('找不到canvas元素');
        return;
    }
    
    // 确定文件格式
    const mimeType = format === 'jpeg' ? 'image/jpeg' : 'image/png';
    const fileExt = format === 'jpeg' ? 'jpg' : 'png';
    
    // 生成文件名
    const finalFilename = filename || `canvas_${Date()}.${fileExt}`;
    
    // 转换canvas为图片数据
    let dataURL;
    if (format === 'jpeg') {
        dataURL = canvas.toDataURL(mimeType, quality);
    } else {
        dataURL = canvas.toDataURL(mimeType);
    }
    
    // 创建下载链接并触发下载
    const link = document.createElement('a');
    link.download = finalFilename;
    link.href = dataURL;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

// 使用示例
saveCanvas('myCanvas', 'png');  // 保存为PNG
saveCanvas('myCanvas', 'jpeg', 0.85);  // 保存为JPEG,画质85%

方法三:一行代码实现(最简洁)

// 最简单的保存方式
document.getElementById('myCanvas').toDataURL(); // 获取数据
// 配合下载
const a = document.createElement('a');
a.download = 'image.png';
a.href = document.getElementById('myCanvas').toDataURL();
a.click();

方法四:带错误处理的完整版本

/**
 * 保存Canvas图片(完整版)
 * @param {string|HTMLElement} canvas - canvas元素或ID
 * @param {Object} options - 配置选项
 */
function downloadCanvas(canvas, options = {}) {
    const {
        format = 'png',
        quality = 0.92,
        filename = `canvas_${new Date().getTime()}.${format === 'jpeg' ? 'jpg' : 'png'}`
    } = options;
    
    // 获取canvas元素
    const canvasEl = typeof canvas === 'string' 
        ? document.getElementById(canvas) 
        : canvas;
    
    if (!canvasEl) {
        throw new Error('Canvas元素不存在');
    }
    
    try {
        // 转换格式
        const mimeType = format === 'jpeg' ? 'image/jpeg' : 'image/png';
        const dataURL = format === 'jpeg' 
            ? canvasEl.toDataURL(mimeType, quality)
            : canvasEl.toDataURL(mimeType);
        
        // 创建并触发下载
        const link = document.createElement('a');
        link.download = filename;
        link.href = dataURL;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        
        return true;
    } catch (error) {
        console.error('保存失败:', error);
        return false;
    }
}

// 使用示例
downloadCanvas('myCanvas', {
    format: 'png',
    filename: '我的图片.png'
});

downloadCanvas('myCanvas', {
    format: 'jpeg',
    quality: 0.8,
    filename: '压缩图片.jpg'
});