my goal is comparing two canvas
- using react
- using codemirror as code-editor.
- using html2canvas for convert html element to canvas
- using pixelmatch for compare
im changing the div (style, content etc.) with code editor (codemirror) and convert it to canvas but changes not effect, still getting same output (Unit8ClampedArray)
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 });
}
example output:
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, …]
