0
Chụp màn hình với ReactJs
Chào mọi người!
Cho mình hỏi có ai biết cách để chụp một trang web khác khi đang ở trang hiện tại mà không cần mở trang đó ra không ạ? Ví dụ: Click button ở trang A thì chụp trang B ý ạ.
Mình đang làm với ReactJs ạ.
Thêm một bình luận
1 CÂU TRẢ LỜI
+1
Đơn giản mà sử dụng thư viện thôi
Có 2 cái thư viện bạn có thể xài để thực hiện task này là: puppeteer và html2canvas
Đại ý thì ý tưởng nó sẽ là vầy ko chính xác 100% đâu nhưng có thể tham khảo:
async function captureScreenshot(url) {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url, { waitUntil: 'networkidle2' });
const screenshot = await page.screenshot({ fullPage: true });
await browser.close();
return screenshot;
}
function App() {
const handleButtonClick = useCallback(async () => {
const url = 'trangB'; // URL của trang B
const screenshot = await captureScreenshot(url);
const link = document.createElement('a');
link.href = URL.createObjectURL(new Blob([screenshot.buffer], { type: 'image/png' }));
link.download = 'screenshot.png';
link.click();
}, []);
return (
<div>
<h1>Trang A</h1>
<button onClick={handleButtonClick}>Chụp ảnh trang B</button>
</div>
);
}
Cách sử dụng thư viện cụ thể bạn vào trang https://pptr.dev/ và https://html2canvas.hertzen.com/ để tham khảo thêm nhé.