nashaofu / screenshots Goto Github PK
View Code? Open in Web Editor NEWA screenshot plugin for electron and react
Home Page: https://nashaofu.github.io/screenshots/
License: MIT License
A screenshot plugin for electron and react
Home Page: https://nashaofu.github.io/screenshots/
License: MIT License
WARNING: Textured window <AtomNSWindow: 0x7fa6e5cbcdf0> is getting an implicitly transparent titlebar. This will break when linking against newer SDKs. Use NSWindow's -titlebarAppearsTransparent=YES instead.
mac的retain屏截图模糊
点确认和取消都没反应。我电脑是mac
在使用了透明窗口后,窗口边框5px以内的区域无法响应任何DOM事件,所以无法从左上角开始截图。
这个库能否用到nwjs
导入插件,截图没有黑框, 但是苹果的dock隐藏了
在没添加这个插件的时候,程序坞右键退出会执行app.on('quit')这个方法,添加插件后,就不执行这个。。。然后进程就没法关闭。。。求解决方案,谢谢大佬
希望开发者老哥看看是怎么回事,有没有遇到这个问题的老哥
连续调用几次截图,应用会闪退关闭,是什么原因呢
你是怎么解决的啊,我也一样的情况
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
<!doctype html><title>react-screenshots</title>很抱歉,没有JavaScript,网站不能正常工作。请启用JavaScript。
<script src="js/app.ba516492ce39f1719cc8.js"></script>
app.on('ready', () => {
session.defaultSession.cookies.remove('http://crmapi.wwj.fanwe.com', '_token', () => {
console.log('清除完成')
})
this.createWeChatWindow()
this.createTrayLogin()
this.initShortcutCapture()
this.initIPC()
});
/**
* 初始化截图
*/
initShortcutCapture () {
this.$shortcutCapture = new ShortcutCapture()
if (process.env.NODE_ENV === 'development') {
console.log(129999)
// 下面的代码需要根据实际项目结构修改
this.$shortcutCapture.dirname = path.resolve(path.join(__dirname, '../../node_modules/shortcut-capture'))
}
globalShortcut.register('CmdOrCtrl+Shift+A', () => this.$shortcutCapture.shortcutCapture())
// 拿取截图后返回信息
this.$shortcutCapture.on('capture', ({
dataURL,
bounds
}) => {
this.wechatWindow.webContents.send('capture', dataURL)
})
};
如题,在Linux下,arm平台, 获取到source.toDataURL() 的值为base64的图片字符串,是有值的,但显示出来就是全为黑色。又遇到的么,盼解决。
我是在Electron-vue搭建的项目里面,刚搭建的空项目,直接安装了npm i shortcut-capture
,注册了快捷键ctrl+alt+b
,没有出现截屏的功能
复现步骤:
文件中 的
import Screenshot from '@/components/Screenshots'修改为
import Screenshot from 'react-screenshots'```我写了一个截图程序,也存在截图延迟问题,根据操作系统、屏幕的数量及分辨率,延迟时间不一定,区间在于100ms ~ 1000ms,不知道怎么解决。
参考:https://github.com/xudeming208/electron-capture
首先感谢大佬的分享,插件很好用!
我现在遇到的问题是这样的,在win10的electron中截屏,拖动的时候选中框周围的分辨率会发生变化,造成一种抖动的效果,猜测是因为canvas绘图的时候分辨率变化导致的,但是在mac里目前没有发现这个情况
希望大佬看一下这个问题
如题,截取到的是纯黑色图片,其他操作正常
比如同时有3个屏幕(1个主屏,两个外接屏),可以支持按下快捷键后可以在任何一个屏幕上截图。
解决截图黑屏问题后引入了开始截图时界面会先黑再变为透明
嗨,我fork了一份代码,为react-screenshots包加入了路径拖拽编辑,文件绘制编辑等等功能,体验上做到了和企业微信的截图差不多,这是仓库地址,README里有预览url,如果您觉得满意,我可以提一个pr
你好,我在看github的commit时发现已经修复了这个问题,但是最新的npm包(1.2.2)好像好没有发布?
你好,请问下我调用截屏接口时,报错Not allowed to load local resource,之前我是设置webSecurity,但是install的包我也不好在源码的地方加代码,请问下那这个该如何处理呢
thanks for your great job, what a amazing and easy-to-use lib!
你是怎么处理的,我也遇到同样的情况
首先非常感谢作者的贡献,自己之前写了一个问题太多了,另外希望可以加一个双击屏幕保存的功能
博主您好,
clone了博主您的dingtalk
的代码执行截图功能是ok的,说明我的电脑(win7,64)支持该截图功能
但在我的项目安装shortcut-capture
则无反应,运行没有报错,按下'alt+ctl+a'后屏幕会闪一下然后没后跳出截图的界面。dingtalk
使用的electron版本是2.0.15,我的项目使用eletron的版本是4.0.0,请问是否支持该版本?
谢谢
确认调用了startCapture方法,但是无任何反应
发现electron截屏时间比较长,desktopCapturer.getSources在mac上要200ms,windows上要700ms,这个能直接感觉到了,有没有好的办法解决?
Failed to compile with 1 errors
error in ./node_modules/react-screenshots/dist/index.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
<!doctype html><title>react-screenshots</title>很抱歉,没有JavaScript,网站不能正常工作。请启用JavaScript。
<script src="js/app.0407e3e35ed3add17d1e.js"></script>
@ ./node_modules/electron-screenshots/lib/screenshots.js 107:33-85
@ ./src/main/background.js
@ multi ./src/main/background.js
vuecli3+Vue CLI Plugin Electron Builder 这个环境内使用shortcut-capture的readme 代码无反应,vue.config.js 加上
configureWebpack: {
externals: {
'shortcut-capture': "shortcut-capture"
}
},
还是没效果,这个要怎么处理?
when screenshots.startCapture(), resize the selection or move it, then click ok button. from the event ok callback, the CaptureData.Bounds, resizing and moving is always false, like: { resizing: false, x1: 99, y1: 184, x2: 677, y2: 332, moving: false }.
state of the image while we click onOk is not cleared to clear that we have to refresh the page manually
and was it possible to enable touch based drawing..?
packages/react-screenshots/src/electron/app.js
getSource = (e, display) => {
getSource(display).then(({ thumbnail }) => {
// 捕捉完桌面后通知主进程
ipcRenderer.send('SCREENSHOTS::CAPTURED')
this.setState({ image: thumbnail.toDataURL() })
})
}
改造成:
handleStream = (stream, callback) => {
document.body.style.opacity = '1'
// 创建隐藏 video 元素
const video = document.createElement('video')
video.autoplay = true
video.style.cssText = 'position:absolute;top:-10000px;left:-10000px;'
let loaded = false
video.onplaying = () => {
if (loaded) return
loaded = true
video.style.height = video.videoHeight + 'px'
video.style.width = video.videoWidth + 'px'
const canvas = document.createElement('canvas')
canvas.width = video.videoWidth
canvas.height = video.videoHeight
const ctx = canvas.getContext('2d')
if (!ctx) return
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
if (callback) {
callback(canvas.toDataURL('image/png'))
}
video.remove()
try {
stream.getTracks()[0].stop()
} catch (e) {
console.error('getTracks error')
}
}
// 将流传给 video
video.srcObject = stream
document.body.appendChild(video)
};
getSource = (e, display) => {
getSource(display).then((source) => {
if (!source) {
console.error('未找到屏幕源')
return
}
const config = {
audio: false,
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: source.id,
minWidth: 1280,
minHeight: 720,
maxWidth: 8000,
maxHeight: 8000
}
}
}
navigator.mediaDevices.getUserMedia(config).then((e) => {
this.handleStream(e, (dataurl) => {
ipcRenderer.send('SCREENSHOTS::CAPTURED')
this.setState({ image: dataurl })
})
}).catch(e => {
console.error('屏幕捕获异常', e)
})
})
}
上面的代码没有运行验证,但是思路大概是这样
如题
?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.