JavaScript實現頁面截圖3種解決方案
更新時間:2024年06月20日 11:05:07 作者:高樹悲風
網頁截圖是指將網頁上的內容截取下來,并保存為圖片的過程,下面這篇文章主要給大家介紹了關于JavaScript實現頁面截圖的3種解決方案,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
1.html2canvas
npm install html2canvas
// 引入html2canvas庫
import html2canvas from 'html2canvas';
// 設置定時器,每隔10秒執(zhí)行一次截圖操作
setInterval(async () => {
try {
// 將網頁內容轉換為canvas元素
const canvas = await html2canvas(document.body);
// 將canvas元素轉換為圖片文件base64
const img = canvas.toDataURL('image/png');
// 圖片文件img 處理上床后端
} catch (error) {
console.error('截圖失?。?, error);
}
}, 10000);
2、獲取屏幕流轉為圖片
async function screenshot() {
// 獲取屏幕流
const displayMediaOptions = {
video: {
cursor: "always"
}
};
const stream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
// 創(chuàng)建一個video元素來播放屏幕流
const video = document.createElement('video');
video.srcObject = stream;
await video.play();
// 創(chuàng)建一個canvas元素來截屏
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
// 將視頻播放的內容繪制到canvas上
const context = canvas.getContext('2d');
context.drawImage(video, 0, 0, canvas.width, canvas.height);
// 將canvas內容轉換為base64
const base64 = canvas.toDataURL();
// 關閉視頻流
video.srcObject.getTracks().forEach((track) => track.stop());
return base64;
}3、讓使用者在瀏覽器插件再去調用插件(不推薦)
總結
到此這篇關于JavaScript實現頁面截圖3種解決方案的文章就介紹到這了,更多相關js頁面截圖解決方案內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
uni-app使用uploadFile上傳多張圖片的具體實現
在微信小程序中不支持多張圖片上傳,需要做循環(huán)實現多張圖片上傳,下面這篇文章主要給大家介紹了關于uni-app使用uploadFile上傳多張圖片的具體實現,需要的朋友可以參考下2023-04-04
詳解webpack import()動態(tài)加載模塊踩坑
這篇文章主要介紹了詳解webpack import()動態(tài)加載模塊踩坑,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
JavaScript中filter() 和find()的區(qū)別對比小結
filter()?和?find()?都是 JavaScript 數組的高階函數,用于搜索數組元素,本文主要介紹了JavaScript中filter() 和find()的區(qū)別對比,感興趣的可以了解一下2025-05-05

