需求: 需要截取桌面打开的相关应用的图片。
方法:截图我们采用的api是electron的desktopCapturer
,通过这个api我们可以拿到桌面打开的各种应用的缩略图,最终可以拿到一个electron
的nativeImage
格式的实例,这种格式具有toDataURL()
、crop(rect)
、resize(options)
等各种方法,可以对其根据需求进行处理。
具体代码如下:
// 截图方法
shotClick() {
desktopCapturer.getSources(
{
types: ['window'],
thumbnailSize: {
width: 1200,
height: 1200
}
},
(error, sources) => {
if (!error) {
if (sources && sources.length > 0) {
this.pushImg(sources)
}
} else {
this.$message.error('截图失败')
}
}
)
},
// 将截取的图片放进数组预览
pushImg(sources) {
if (
sources.some((item) => {
return item.name.includes('Chrome')
})
) {
sources.forEach((item) => {
if (item.name.includes('Chrome')) {
// item.thumbnail,是一个nativeImage格式的实例,crop方法可以截取部分图片
let str = item.thumbnail.crop({ x: 0, y: 30, width: 1200, height: 1170 })
this.srcList.push(str.toDataURL()) // 转成base64,可以用来上传到后台,srcList也可以用来预览图片
}
})
} else {
}
},