如何在Canvas上添加图片并绘图，保存含绘图的完整新图片至服务器？

你的问题核心在于：原图和Canvas只是视觉上重叠，但Canvas本身并没有包含原图的像素数据——你现在的Canvas里只有你绘制的内容，原图是独立的<img>标签，所以调用canvas.toDataURL()自然只能导出绘图部分，而非两者的组合。

下面是完整的解决步骤：

1. 修正HTML结构 #

首先要解决你代码里的两个问题：一是重复使用id="img"（HTML中id必须唯一），二是让Canvas成为承载原图和绘图的载体，原图可以隐藏起来只做数据源：

<!-- 原图作为数据源，隐藏起来 -->
<img style="display: none;" id="sourceImg" src="<?= $image ?>" />
<!-- Canvas用来绘制原图+你的绘图，尺寸和原图一致 -->
<canvas id="can" width="833" height="602" style="position:absolute;top:10%;left:10%"></canvas>

2. 把原图绘制到Canvas上 #

在你开始绘图之前，必须先将原图加载并绘制到Canvas中。注意一定要等图片加载完成再执行绘制，否则会因为图片未加载完成而失败：

const sourceImg = document.getElementById('sourceImg');
const canvas = document.getElementById('can');
const ctx = canvas.getContext('2d');

// 监听图片加载完成事件
sourceImg.onload = function() {
    // 将原图绘制到Canvas上，铺满整个Canvas
    ctx.drawImage(sourceImg, 0, 0, canvas.width, canvas.height);
    
    // 这里可以添加你的自定义绘图代码，比如画一个红色矩形示例：
    // ctx.fillStyle = '#ff0000';
    // ctx.fillRect(50, 50, 100, 100);
};

3. 保存完整的Canvas内容 #

现在Canvas里已经同时包含了原图和你的绘图内容，这时候再调用toDataURL()就能导出完整的组合图像了，你的AJAX代码可以保留逻辑，确保在绘图完成后调用：

function saveCombinedImage() {
    const dataURL = canvas.toDataURL();
    $.ajax({
        type: "POST",
        url: "canvas_ajax_upload.php",
        data: { img: dataURL }
    }).done(function(msg){
        alert(msg);
    });
}

额外注意事项 #

• 跨域问题：如果你的原图来自其他域名，需要确保图片服务器配置了CORS（跨域资源共享）允许，否则Canvas会被标记为"污染"，无法导出dataURL。
• 尺寸匹配：确保Canvas的width和height属性与原图尺寸一致，避免拉伸或变形。
• 加载顺序：如果你的原图是动态加载的，一定要确保在调用绘图和保存函数前，图片已经完成加载。

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