starred/Electron.NET
1
0
Fork 0
mirror of https://github.com/ElectronNET/Electron.NET.git synced 2026-05-06 20:28:22 +00:00
Code Issues 668 Packages Projects Releases 20 Wiki Activity

update screenshot code

Browse Source
This commit is contained in:
rafael-aero
2021-11-22 11:38:16 +01:00
parent ffedbcc5df
commit af0410998e
1 changed files with 27 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
ElectronNET.WebApp/Views/DesktopCapturer/Index.cshtml
View File

@@ -22,104 +22,46 @@
<button class="demo-button" id="screen-shot">View Demo</button>
<span class="demo-response is-selectable" id="screenshot-path"></span>
</div>
<img id="screenshot-image" style="width:100%; object-fit: contain"/>
<p>This demo uses the <code>desktopCapturer</code> module to gather screens in use and select the entire screen and take a snapshot of what is visible.</p>
<p>Clicking the demo button will take a screenshot of your current screen and open it in your default viewer.</p>
<h5>Renderer Process (JavaScript)</h5>
<pre><code class="javascript">const electron = require('electron');
const desktopCapturer = electron.desktopCapturer;
const electronScreen = electron.screen;
const shell = electron.shell;
<pre><code class="javascript">
const screenshot = document.getElementById('screen-shot');
screenshot.addEventListener('click', function (event) {
const { desktopCapturer } = require('electron')
const fs = require('fs');
const os = require('os');
const path = require('path');
const screenshot = document.getElementById('screen-shot');
const screenshotMsg = document.getElementById('screenshot-path');
screenshot.addEventListener('click', function (event) {
screenshotMsg.textContent = 'Gathering screens...';
const thumbSize = determineScreenShotSize();
let options = { types: ['screen'], thumbnailSize: thumbSize }
desktopCapturer.getSources(options, function (error, sources) {
if (error) return console.log(error);
sources.forEach(function (source) {
if (source.name === 'Entire screen' || source.name === 'Screen 1') {
const screenshotPath = path.join(os.tmpdir(), 'screenshot.png');
fs.writeFile(screenshotPath, source.thumbnail.toPng(), function (error) {
if (error) return console.log(error);
shell.openExternal('file://' + screenshotPath);
const message = `Saved screenshot to: ${screenshotPath}`;
screenshotMsg.textContent = message;
});
desktopCapturer.getSources({ types: ['screen'], thumbnailSize: {
width: window.screen.width,
height: window.screen.height
}}).then(async sources => {
for (const source of sources) {
document.getElementById('screenshot-image').src = source.thumbnail.toDataURL();
return;
}
})
})
})
function determineScreenShotSize () {
const screenSize = electronScreen.getPrimaryDisplay().workAreaSize;
const maxDimension = Math.max(screenSize.width, screenSize.height);
return {
width: maxDimension * window.devicePixelRatio,
height: maxDimension * window.devicePixelRatio
}
});
});
}</code></pre>
</div>
</div>
</div>
<script type="text/javascript">
(function(){
const electron = require('electron');
const desktopCapturer = electron.desktopCapturer;
const electronScreen = electron.screen;
const shell = electron.shell;
const screenshot = document.getElementById('screen-shot');
screenshot.addEventListener('click', function (event) {
const { desktopCapturer } = require('electron')
const fs = require('fs');
const os = require('os');
const path = require('path');
const screenshot = document.getElementById('screen-shot');
const screenshotMsg = document.getElementById('screenshot-path');
screenshot.addEventListener('click', function (event) {
screenshotMsg.textContent = 'Gathering screens...';
const thumbSize = determineScreenShotSize();
let options = { types: ['screen'], thumbnailSize: thumbSize }
desktopCapturer.getSources(options, function (error, sources) {
if (error) return console.log(error);
sources.forEach(function (source) {
if (source.name === 'Entire screen' || source.name === 'Screen 1') {
const screenshotPath = path.join(os.tmpdir(), 'screenshot.png');
fs.writeFile(screenshotPath, source.thumbnail.toPng(), function (error) {
if (error) return console.log(error);
shell.openExternal('file://' + screenshotPath);
const message = `Saved screenshot to: ${screenshotPath}`;
screenshotMsg.textContent = message;
});
}
})
})
})
function determineScreenShotSize () {
const screenSize = electronScreen.getPrimaryDisplay().workAreaSize;
const maxDimension = Math.max(screenSize.width, screenSize.height);
return {
width: maxDimension * window.devicePixelRatio,
height: maxDimension * window.devicePixelRatio
}
desktopCapturer.getSources({ types: ['screen'], thumbnailSize: {
width: window.screen.width,
height: window.screen.height
}}).then(async sources => {
for (const source of sources) {
document.getElementById('screenshot-image').src = source.thumbnail.toDataURL();
return;
}
}());
});
});
</script>
</section>