[internal] try to clip canvas from the image and stick on top of the canvas in DOM

[Skn0tt]

I'm surprised this works so well, but here's a demo of clipping the screenshot content into the snapshot:

Works pretty well! Here's the code I used for this prototype:

const canvases = root.querySelectorAll('canvas');
if (canvases.length > 0) {
  const sha1 = 'page@939f79e6ba8017f6c74e645d37ae269c-1728987650387.jpeg';
  fetch(`http://[::1]:63320/trace/sha1/${sha1}`).then(response => response.blob()).then(blob => {
    const img = new Image();
    img.onload = () => {
      for (const canvas of canvases) {
        const context = canvas.getContext('2d')!;

        const boundingRect = canvas.getBoundingClientRect();
        const xStart = boundingRect.left / window.innerWidth;
        const yStart = boundingRect.top / window.innerHeight;
        const xEnd = boundingRect.right / window.innerWidth;
        const yEnd = boundingRect.bottom / window.innerHeight;

        context.drawImage(img, xStart * img.width, yStart * img.height, (xEnd - xStart) * img.width, (yEnd - yStart) * img.height, 0, 0, canvas.width, canvas.height);
      }
    };
    img.src = URL.createObjectURL(blob);
  });
}

The snapshot JPEG is still hardcoded, but getting that to work should be doable I think. Interesting! If I can get this to work, it'll definitely supersede the "screenshot instead of snapshot" toggle approach.