嘿，这个需求我刚好折腾过，咱们一步步来搞定它！核心思路是：先把Div当前显示的背景区域提取并绘制到Canvas，修改Canvas后再把修改的区域合并回原背景图，最后更新Div的背景。

一、从Div提取背景并绘制到Canvas对应区域 #

首先我们要把Div中当前视口可见的背景部分画到Canvas上，需要处理背景图加载、滚动偏移这些细节：

1. 获取元素与初始化 #

const bgDiv = document.querySelector('div');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
let bgImg = new Image();

// 确保Canvas尺寸和视口一致
function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  // 调整尺寸后重新绘制背景
  if (bgImg.complete) drawBgToCanvas();
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();

2. 提取背景Data URL并加载 #

// 从Div的style中提取背景图的Data URL
function getBgUrl() {
  const bgMatch = bgDiv.style.background.match(/url\((.*?)\)/);
  return bgMatch ? bgMatch[1].replace(/['"]/g, '') : '';
}

// 加载背景图并绘制到Canvas
function loadBgAndDraw() {
  const bgUrl = getBgUrl();
  if (!bgUrl) return;
  
  bgImg.onload = drawBgToCanvas;
  bgImg.src = bgUrl;
}

// 绘制当前视口对应的背景区域到Canvas
function drawBgToCanvas() {
  const scrollX = bgDiv.scrollLeft;
  const scrollY = bgDiv.scrollTop;
  
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 关键：从背景图的滚动偏移位置截取视口大小的区域，画到Canvas
  ctx.drawImage(
    bgImg,
    scrollX, scrollY, window.innerWidth, window.innerHeight, // 原图截取区域
    0, 0, window.innerWidth, window.innerHeight // Canvas绘制区域
  );
}

// 监听Div的滚动事件，滚动时更新Canvas内容
bgDiv.addEventListener('scroll', drawBgToCanvas);

// 初始化加载背景
loadBgAndDraw();

二、将修改后的Canvas内容合并回Div背景 #

当你在Canvas上完成修改后，需要把这部分内容合并到原背景图中，再更新Div的背景：

function updateDivBackground() {
  // 创建临时Canvas用于合并原背景和修改后的内容
  const tempCanvas = document.createElement('canvas');
  const tempCtx = tempCanvas.getContext('2d');
  
  // 设置临时Canvas为原背景图的尺寸
  tempCanvas.width = bgImg.width;
  tempCanvas.height = bgImg.height;
  
  // 先绘制原背景图
  tempCtx.drawImage(bgImg, 0, 0);
  
  // 将Canvas上修改后的内容画到临时Canvas对应的滚动偏移位置
  const scrollX = bgDiv.scrollLeft;
  const scrollY = bgDiv.scrollTop;
  tempCtx.drawImage(
    canvas,
    0, 0, window.innerWidth, window.innerHeight, // Canvas截取区域
    scrollX, scrollY, window.innerWidth, window.innerHeight // 临时Canvas绘制位置
  );
  
  // 生成新的Data URL并更新Div背景
  const newBgUrl = tempCanvas.toDataURL();
  bgDiv.style.background = `url(${newBgUrl})`;
  
  // 更新bgImg为最新的背景图，方便后续操作
  bgImg.src = newBgUrl;
}

三、关键细节提醒 #

• 背景属性兼容：如果你的Div设置了background-repeat、background-position等属性，记得在更新背景时保留这些属性，比如可以先保存原background的其他部分，只替换url部分：

  const originalBgStyle = bgDiv.style.background.replace(/url\(.*?\)/, '');
  bgDiv.style.background = `${originalBgStyle}url(${newBgUrl})`;
  

• 性能优化：如果背景图很大，频繁创建临时Canvas可能会有性能问题，可以考虑复用同一个临时Canvas，而不是每次都创建新的。
• 跨域问题：不过这里背景是Data URL，不存在跨域，所以不用担心drawImage的跨域限制。

比如你可以在Canvas上添加一个按钮，点击后触发updateDivBackground()，就能把修改后的内容同步回Div的背景了。

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