mirror of
https://github.com/ElectronNET/Electron.NET.git
synced 2026-02-15 13:45:09 +00:00
69 lines
3.0 KiB
Plaintext
69 lines
3.0 KiB
Plaintext
<template class="task-template">
|
|
<section id="desktop-capturer-section" class="section js-section u-category-media">
|
|
<header class="section-header">
|
|
<div class="section-wrapper">
|
|
<h1>
|
|
<svg class="section-icon"><use xlink:href="assets/img/icons.svg#icon-media"></use></svg>
|
|
Take a screenshot
|
|
</h1>
|
|
<h3>The <code>desktopCapturer</code> module in Electron can be used to access any media, such as audio, video, screen and window, that is available through the <code>getUserMedia</code> web API in Chromium.</h3>
|
|
|
|
<p>Open the <a href="http://electron.atom.io/docs/api/desktop-capturer">full API documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> in your browser.</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="demo">
|
|
<div class="demo-wrapper">
|
|
<button id="print-pdf-demo-toggle" class="js-container-target demo-toggle-button">Take a Screenshot
|
|
<div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux | Process: Renderer</div>
|
|
</button>
|
|
<div class="demo-box">
|
|
<div class="demo-controls">
|
|
<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 screenshot = document.getElementById('screen-shot');
|
|
screenshot.addEventListener('click', function (event) {
|
|
const { desktopCapturer } = require('electron')
|
|
|
|
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;
|
|
}
|
|
});
|
|
});
|
|
}</code></pre>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
const screenshot = document.getElementById('screen-shot');
|
|
screenshot.addEventListener('click', function (event) {
|
|
const { desktopCapturer } = require('electron')
|
|
|
|
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>
|
|
</template>
|