File size: 1,293 Bytes
3b6afc0 |
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 |
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>;
};
|