React中html2canvas无法检测DOM变更致画布对比异常问题

我需要对比两个Canvas，使用的技术栈包括React、Codemirror代码编辑器、html2canvas（用于将HTML元素转为Canvas）、pixelmatch（用于像素对比）。通过Codemirror修改目标div的样式、内容等属性后，使用html2canvas将其转为Canvas，但变更未生效，始终得到相同的Uint8ClampedArray输出。

相关代码 #

const onRun = async () => {
        const iframe = document.getElementById("preview");
        const task = document.getElementsByClassName("runjs__task")[0];
        const w = parseInt(task.offsetWidth);
        const h = parseInt(task.offsetHeight);
        const img1 = await html2canvas(iframe, { logging: false }).then(function (canvas) {
            return canvas.getContext("2d").getImageData(0, 0, parseInt(iframe.offsetWidth), parseInt(iframe.offsetHeight)).data
        });
        const img2 = await html2canvas(task, { logging: false }).then(function (canvas) {
            return canvas.getContext("2d").getImageData(0, 0, parseInt(task.offsetWidth), parseInt(task.offsetHeight)).data
        });
        console.log(img1);
        console.log(img2);
        comporeImage(img1, img2, w, h);
    };
    const comporeImage = (img1, img2, w, h) => {
        var diff;
        console.log("results",pixelmatch(img1, img2, diff, w, h, { threshold: 0.5 }));
        return pixelmatch(img1, img2, diff, w, h, { threshold: 0.1 });
    }

示例输出 #

Uint8ClampedArray(311112) [255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, …]

1. 确保DOM完成更新后再截图 #

React状态更新是异步的，修改内容后可能DOM还没完成渲染就调用了html2canvas。可以通过以下方式解决：

• 使用flushSync强制同步更新状态，确保DOM更新后再执行截图：

import { flushSync } from 'react';

// 假设setCode是更新Codemirror内容的状态函数
const handleCodeChange = (newCode) => {
  flushSync(() => {
    setCode(newCode);
  });
  onRun(); // 此时DOM已完成更新
};

• 或者使用useEffect监听修改后的状态，触发截图：

useEffect(() => {
  if (code) { // code是Codemirror的内容状态
    onRun();
  }
}, [code]);

2. 修正iframe的截图方式 #

直接传入iframe元素给html2canvas可能无法正确捕获内部内容，需要访问iframe的文档对象：

const img1 = await html2canvas(iframe.contentDocument.body, { 
  logging: false,
  width: iframe.offsetWidth,
  height: iframe.offsetHeight
}).then(canvas => {
  return canvas.getContext("2d").getImageData(0, 0, iframe.offsetWidth, iframe.offsetHeight).data;
});

3. 初始化pixelmatch的差异数组 #

原代码中diff变量未初始化，pixelmatch需要一个已创建的Uint8ClampedArray来存储差异数据：

const comporeImage = (img1, img2, w, h) => {
  // 初始化与原图尺寸一致的差异数组
  const diff = new Uint8ClampedArray(w * h * 4);
  const diffPixelCount = pixelmatch(img1, img2, diff, w, h, { threshold: 0.1 });
  console.log("差异像素数量", diffPixelCount);
  return diff;
};

4. 使用React Refs获取目标元素 #

避免使用原生DOM选择器可能拿到旧元素的问题，改用useRef绑定目标元素：

import { useRef } from 'react';

const taskRef = useRef(null);

// 在组件JSX中绑定ref
<div className="runjs__task" ref={taskRef}></div>

// 在onRun中获取元素
const onRun = async () => {
  const task = taskRef.current;
  if (!task) return;
  // 后续逻辑...
};

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