html-to-image
html-to-image copied to clipboard
Performance Issues
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
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.
In case you might be interested: https://twitter.com/_justineo/status/1706678566761685343