Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-09-21 21:50:49 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(ScreenshotContext): use html-to-image for lighter bundle, faster processing

Browse source
This commit is contained in:
Danny Avila 2023-08-14 19:13:24 -04:00 • committed by Danny Avila
parent 74802dd720
commit bbe4931a97
3 changed files with 54 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/package.json
View file

@ -52,7 +52,7 @@
"esbuild": "0.17.19",
"export-from-json": "^1.7.2",
"filenamify": "^6.0.0",
"html2canvas": "^1.4.1",
"html-to-image": "^1.11.11",
"librechat-data-provider": "*",
"lodash": "^4.17.21",
"lucide-react": "^0.220.0",

44
client/src/hooks/ScreenshotContext.jsx
View file

@ -1,44 +0,0 @@
import { createContext, useRef, useContext } from 'react';
import html2canvas from 'html2canvas';
const ScreenshotContext = createContext({});
export const useScreenshot = () => {
const { ref } = useContext(ScreenshotContext);
const takeScreenShot = (node) => {
if (!node) {
throw new Error('You should provide correct html node.');
}
return html2canvas(node).then((canvas) => {
const croppedCanvas = document.createElement('canvas');
const croppedCanvasContext = croppedCanvas.getContext('2d');
// init data
const cropPositionTop = 0;
const cropPositionLeft = 0;
const cropWidth = canvas.width;
const cropHeight = canvas.height;
croppedCanvas.width = cropWidth;
croppedCanvas.height = cropHeight;
croppedCanvasContext.drawImage(canvas, cropPositionLeft, cropPositionTop);
const base64Image = croppedCanvas.toDataURL('image/png', 1);
return base64Image;
});
};
const captureScreenshot = () => {
return takeScreenShot(ref.current);
};
return { screenshotTargetRef: ref, captureScreenshot };
};
export const ScreenshotProvider = ({ children }) => {
const ref = useRef(null);
return <ScreenshotContext.Provider value={{ ref }}>{children}</ScreenshotContext.Provider>;
};

53
client/src/hooks/ScreenshotContext.tsx Normal file
View file

@ -0,0 +1,53 @@
import { createContext, useRef, useContext, Ref } from 'react';
import { toCanvas } from 'html-to-image';
type ScreenshotContextType = {
ref?: Ref<HTMLElement>;
};
const ScreenshotContext = createContext<ScreenshotContextType>({});
export const useScreenshot = () => {
const { ref } = useContext(ScreenshotContext);
const takeScreenShot = async (node: HTMLElement) => {
if (!node) {
throw new Error('You should provide correct html node.');
}
const canvas = await toCanvas(node);
const croppedCanvas = document.createElement('canvas');
const croppedCanvasContext = croppedCanvas.getContext('2d');
// init data
const cropPositionTop = 0;
const cropPositionLeft = 0;
const cropWidth = canvas.width;
const cropHeight = canvas.height;
croppedCanvas.width = cropWidth;
croppedCanvas.height = cropHeight;
croppedCanvasContext?.drawImage(canvas, cropPositionLeft, cropPositionTop);
const base64Image = croppedCanvas.toDataURL('image/png', 1);
return base64Image;
};
const captureScreenshot = async () => {
if (ref instanceof Function) {
throw new Error('Ref callback is not supported.');
}
if (ref?.current) {
return takeScreenShot(ref.current);
}
throw new Error('Ref is not attached to any element.');
};
return { screenshotTargetRef: ref, captureScreenshot };
};
export const ScreenshotProvider = ({ children }) => {
const ref = useRef(null);
return <ScreenshotContext.Provider value={{ ref }}>{children}</ScreenshotContext.Provider>;
};