bubkoo / html-to-image

✂️ Generates an image from a DOM node using HTML5 canvas and SVG.
MIT License
5.4k stars 505 forks source link

Performance Issues #403

Open xjustleoo opened 1 year ago

xjustleoo commented 1 year ago

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);
};```
vivcat[bot] commented 1 year ago

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

Justineo commented 9 months ago

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