bubkoo / html-to-image

✂️ Generates an image from a DOM node using HTML5 canvas and SVG.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Performance Issues

xjustleoo opened this issue · 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);
};```
commented

👋 @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.