纯JavaScript代码实现保存Canvas图片到电脑

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

方法一：基础版本（最常用）

javascript

// 保存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格式

javascript

/**
 * 保存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%

方法三：一行代码实现（最简洁）

javascript

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

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

javascript

/**
 * 保存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'
});