return screenshot({format: 'png'}).then((img): [string, Buffer] => {
return [ img.toString('base64'), img];
}).catch((err): {} => {
console.log('截图失败', err);
return err;
})
}
export const startScreenshotTimer = (callback): {} => {
return setInterval((): void => {
createScreenshot().then(([imgStr, img]): void => {
callback(['data:image/png;base64,' + imgStr, img]);
})
}, SCREENSHOT_INTERVAL)
}
然后通过socketio的emit来传到客户端:
startScreenshotTimer(([imgStr, img]): void => {
io.sockets.emit('screenshot', imgStr);
});客户端收到图片后,设置到img的src上(这里是base64的图片url):
<img
class="screenshot"
:src="screenshot"
/>
data () {
return {
screenshot: ''
}
}
socket.on('screenshot', (data) => {
this.screenshot = data
})其实这样就已经实现了桌面监控了,有兴趣的同学可以照着这个思路实现看看,并不是很麻烦。
当然这样的方案是有问题的,因为我们需要知道服务端桌面尺寸的大小,然后根据这个来调整客户端显示的图片尺寸。
实现这个细节是使用的get-pixels这个库,可以读取本地图片文件的宽度高度等信息,所以我先把图片写入本地,然后又读取出来,这样获取到的屏幕尺寸。
interface ScreenSize {
width: number;
height: number;
}function getScreenSize(img): Promise<ScreenSize> {
const imgPath = path.resolve(process.cwd(), './tmp.png');
fs.writeFileSync(imgPath, img);
return new Promise((resolve): void => {
getPixels(imgPath, function(err, pixels): void {
if(err) {
console.log("Bad image path")
return
}
resolve({
width: pixels.shape[0],
height: pixels.shape[1] });
});
})
}
然后通过socektio传递给客户端
getScreenSize(img).then(({ width, height}) => {
io.sockets.emit('screensize', {
width,
height
})
});客户端收到之后调整图片大小就可以了
<img
class="screenshot"
:src="screenshot"
:style="screenshotStyle"
/>
data () {
return {
screenshot: '',
screenshotStyle: '',
}
}









