File size: 2,078 Bytes
f0743f4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | import { createContext, useRef, useContext, RefObject } from 'react';
import { toCanvas } from 'html-to-image';
import { ThemeContext, isDark } from '@librechat/client';
type ScreenshotContextType = {
ref?: RefObject<HTMLDivElement>;
};
const ScreenshotContext = createContext<ScreenshotContextType>({});
export const useScreenshot = () => {
const { ref } = useContext(ScreenshotContext);
const { theme } = useContext(ThemeContext);
const takeScreenShot = async (node?: HTMLElement) => {
if (!node) {
throw new Error('You should provide correct html node.');
}
const backgroundColor = isDark(theme) ? '#171717' : 'white';
const canvas = await toCanvas(node, {
backgroundColor,
imagePlaceholder:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII=',
});
const croppedCanvas = document.createElement('canvas');
const croppedCanvasContext = croppedCanvas.getContext('2d') as CanvasRenderingContext2D;
// init data
const cropPositionTop = 0;
const cropPositionLeft = 0;
const cropWidth = canvas.width;
const cropHeight = canvas.height;
croppedCanvas.width = cropWidth;
croppedCanvas.height = cropHeight;
croppedCanvasContext.fillStyle = backgroundColor;
croppedCanvasContext.fillRect(0, 0, cropWidth, 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>;
};
|