File size: 1,577 Bytes
9705b6c |
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 |
import { createContext, useRef, useContext, RefObject } from 'react';
import { toCanvas } from 'html-to-image';
type ScreenshotContextType = {
ref?: RefObject<HTMLDivElement>;
};
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>;
};
|