Django框架下Canvas加载图片后绘图时图片消失的问题排查

嘿，这个问题我做Canvas项目时也碰到过！核心原因其实是Canvas的位图绘制特性——它没有图层概念，每次你调用绘图API绘制新图形时，默认是在当前画布上直接覆盖绘制，如果不先把之前加载的图片重新渲染一遍，原来的图片就会被新的绘制操作“覆盖掉”。

下面是具体的问题排查和解决方案：

常见问题点 #

• 点击“Draw”按钮时，只执行了多边形绘制逻辑，没有先重新把图片画回Canvas
• 图片对象没被持久保存，导致绘制时无法引用已加载的图片
• 不小心调用了clearRect()清空画布，但后续没有重新绘制图片的步骤

具体解决方案 #

1. 持久保存图片对象和Canvas上下文 #

首先，把加载后的图片对象和Canvas上下文保存为全局变量（或闭包变量），这样点击按钮时能直接复用，不用重新加载：

// 获取Canvas元素和上下文
const canvas = document.getElementById('your-canvas-id');
const ctx = canvas.getContext('2d');
// 全局保存已加载的图片对象
let loadedImage = null;

// 加载图片到Canvas的函数（URL来自Django传递的静态/媒体文件地址）
function loadImage(imageUrl) {
    loadedImage = new Image();
    loadedImage.onload = function() {
        // 设置Canvas尺寸与图片一致，避免拉伸
        canvas.width = loadedImage.width;
        canvas.height = loadedImage.height;
        // 第一次绘制图片到Canvas
        ctx.drawImage(loadedImage, 0, 0);
    };
    // 替换为你的Django图片URL，比如模板中传递的{{ image.url }}
    loadedImage.src = imageUrl;
}

2. 点击Draw按钮时，先重绘图片再画多边形 #

在按钮的点击事件处理函数中，一定要先重新绘制图片，再执行多边形的绘制逻辑：

document.getElementById('draw-btn').addEventListener('click', function() {
    // 先判断图片是否已加载完成
    if (!loadedImage) return;

    // 关键步骤：先把图片重新画到Canvas上，覆盖原有内容
    ctx.drawImage(loadedImage, 0, 0);

    // 然后开始绘制你的多边形（示例坐标，替换成你的业务逻辑）
    ctx.beginPath();
    ctx.moveTo(100, 100);
    ctx.lineTo(200, 100);
    ctx.lineTo(150, 200);
    ctx.closePath();
    ctx.strokeStyle = '#ff0000';
    ctx.lineWidth = 3;
    ctx.stroke();
});

额外注意事项 #

• 如果Canvas尺寸会动态变化，每次绘制前都要重新设置canvas.width和canvas.height，并重新绘制图片
• 不用额外调用ctx.clearRect()，直接调用drawImage就会覆盖整个画布，相当于间接清空了之前的内容
• 确保Django传递的图片URL可访问：静态文件需配置STATIC_URL，媒体文件需配置MEDIA_URL和对应路由

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