html-to-image icon indicating copy to clipboard operation
html-to-image copied to clipboard

Performance Issues

Open xjustleoo opened this issue 1 year ago • 2 comments

I'm using this library to create thumbnails for a slide creator (like a web powerpoint basically) This is my code, im using a debounce logic to keep the thumbnail refreshes low. On my Mac the performance is good, but my windows computer lags like crazy.

  const hasBeenCalled = useRef(false);
  useEffect(() => {
    if (hasBeenCalled.current) return;
    const handler = setTimeout(() => {
      effect();
      hasBeenCalled.current = false;
    }, delay);

    return () => {
      clearTimeout(handler);
      hasBeenCalled.current = false;
    };
  }, [...dependencies, hasBeenCalled]);
};

export const updateThumbnail = async (page: WorkbenchPage) => {
  const { updatePageThumbnail } = useWorkbench.getState();

  const node = document.getElementById(`document-${page.id}-workbench`);
  if (!node) return;

  function filter(node) {
    return node.tagName !== 'i';
  }

  const options = {
    filter: filter,
    cacheBust: true,
    includeQueryParams: true,
    quality: 0.01,
  };

  await toJpeg(node, options);
  await toJpeg(node, options);

  const dataUrl = await toJpeg(node, options);
  updatePageThumbnail(page.id, dataUrl);
};```

xjustleoo avatar May 09 '23 15:05 xjustleoo

👋 @xjustleoo

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

biiibooo[bot] avatar May 09 '23 15:05 biiibooo[bot]

In case you might be interested: https://twitter.com/_justineo/status/1706678566761685343

Justineo avatar Sep 27 '23 01:09 Justineo