Canvas持久化白板：数据库图像数据重绘失败问题求助

我用HTML和JS开发了一款持久化白板应用，用户在Canvas上绘图后点击保存，Canvas图像数据会被存储到MySQL数据库中。页面重新加载时，Canvas应从数据库获取存储的图像数据并重新绘制，实现白板持久化。

目前fetch功能运行正常，图像数据已正确获取并存储到数据结构中，但页面重新加载时图像无法在Canvas上重绘。核心问题在于使用imageData.data.set(latestDrawing)时，imageData的长度与预期的latestDrawing长度不匹配，请问如何利用已有数据创建正确的ImageData？

WhiteBoard.js 中的保存与重绘函数 #

window.addEventListener('load', () => {
    resize();
    redraw();

    window.addEventListener('click', handleOutsideClick);
    document.addEventListener("mousedown", startdrawing);
    document.addEventListener("mousemove", sketch);
    document.addEventListener("mouseup", stopdrawing);
    document.addEventListener("mouseout", stopdrawing);
    window.addEventListener('resize', resize);

});


async function saveState() {
    // console.log("before save")

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

    await fetch('/WhiteBoard', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ type: 'canvasState', data: imageData }),
    });

    console.log("saved")

}

async function redraw() {

    try {
        const response = await fetch('/WhiteBoard');

        var latestDrawing = await response.json();

        if (latestDrawing) {

            //get db data into readable image data form
            latestDrawing = JSON.parse(latestDrawing.data);
            //create a new blank image data
            var imageData = ctx.createImageData(canvas.width, canvas.height);
            imageData.data.set(latestDrawing);
            ctx.putImageData(imageData, 0, 0);
        }

    } catch (error) {
        console.error('Error:', error);
    }

}

Server.js 中的fetch处理函数 #

app.get('/WhiteBoard', (req,res) => {
  // Set the content type to JSON
  res.setHeader('Content-Type', 'application/json');
  
  // Your existing query and response logic
  db.query('SELECT * FROM canvas_state ORDER BY id DESC LIMIT 1', (error, results) => {
    if (error) {
      console.error(error);
      res.status(500).send('Internal Server Error');
    } else {
      res.json(results[0]);
    }
  });
});

我曾尝试创建new Uint8ClampedArray（如某文章建议），但Canvas仍无法重绘保存的图像：

const dataArray = new Uint8ClampedArray(drawingData);

问题分析 #

问题根源在于ImageData的序列化/反序列化逻辑及Canvas尺寸不匹配：

1. 直接将ImageData对象转为JSON时，其data属性（Uint8ClampedArray类型）会被序列化为普通数组，但存储/读取后，若当前Canvas尺寸与保存时不一致，新创建的ImageData长度会和数据库中数组长度不匹配，导致set操作失败。
2. 即使转换为Uint8ClampedArray，尺寸不匹配的情况下依然无法正确赋值。

解决方案 #

1. 保存时记录Canvas尺寸并标准化数据格式

修改saveState函数，保存图像数据的同时记录Canvas的宽高，避免后续尺寸不一致：

async function saveState() {
    // 组装包含尺寸和图像数据的状态对象
    const canvasState = {
        width: canvas.width,
        height: canvas.height,
        // 将Uint8ClampedArray转为普通数组方便JSON序列化
        data: Array.from(ctx.getImageData(0, 0, canvas.width, canvas.height).data)
    };

    await fetch('/WhiteBoard', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ type: 'canvasState', data: canvasState }),
    });

    console.log("saved")
}

2. 重绘时先恢复Canvas尺寸再创建匹配的ImageData

修改redraw函数，先根据保存的尺寸设置Canvas大小，再创建对应长度的ImageData并赋值：

async function redraw() {
    try {
        const response = await fetch('/WhiteBoard');
        const latestDrawing = await response.json();

        if (latestDrawing) {
            const savedState = JSON.parse(latestDrawing.data);
            // 先将Canvas恢复为保存时的尺寸
            canvas.width = savedState.width;
            canvas.height = savedState.height;
            // 创建与保存数据匹配的ImageData
            const imageData = ctx.createImageData(savedState.width, savedState.height);
            // 将普通数组转为Uint8ClampedArray后赋值
            imageData.data.set(new Uint8ClampedArray(savedState.data));
            ctx.putImageData(imageData, 0, 0);
            
            // 若需要适配窗口尺寸，可在此调用resize函数（注意需实现图像缩放逻辑，避免拉伸）
        }
    } catch (error) {
        console.error('Error:', error);
    }
}

3. 后端数据库字段适配

确保数据库中存储data的字段类型足够大（如使用TEXT或LONGTEXT），避免图像数据被截断导致数组长度缺失。

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