Rendu hors de l'écran | Electron Aller au contenu principal Electron Documentation API Blog Outils * Electron Forge * Fiddle Electron Communauté * Gouvernance * Galerie d'applications existantes * Ressources Versions Français * English * Deutsch * Español * Français * 日本語 * Português * Русский * 中文 Rechercher * Pour commencer * Processus d'Electron * Bonnes pratiques * Exemples * Mode Sombre * Accès aux périphériques * Achats intégrés * * Raccourcis clavier * Liens profonds * Actions du lanceur d'applications sur le bureau * * Menus * Multithreading * Drag & Drop de Fichier natif * Historique de navigation * Notifications * Rendu hors de l'écran * Détection des événements en ligne/hors ligne * Barres de progression * Documents récents * * * Représentation des fichiers dans une BrowserWindow * * Vérificateur d'orthographe * Intégrations Web * Personnalisation de la barre des tâches * * Personnalisation des fenêtres * Développement * Native Node Modules * Distribution * Test et débogage * Références * Contribuer * * Exemples * Rendu hors de l'écran Sur cette page Rendu hors de l'écran Vue d'ensemble ​ Offscreen rendering lets you obtain the content of a BrowserWindow in a bitmap or a shared GPU texture, so it can be rendered anywhere, for example, on texture in a 3D scene. Le rendu hors écran d'Electron utilise une approche similaire à celle du projet Chromium Embedded Framework . Notes : * Il y a deux modes de rendu qui peuvent être utilisés (voir la section ci-dessous) et seule la zone modifiée est concernée par l'événement paint pour plus d'efficacité. * Vous pouvez stopper/reprendre le rendu ainsi que définir la fréquence d'affichage de l’image. * When webPreferences.offscreen.useSharedTexture is false , the maximum frame rate is 240 because greater values bring only performance losses with no benefits. * Quand rien ne se passe sur une page Web, aucune image n'est générée. * An offscreen window is always created as a Frameless Window . Mode de rendu ​ Accélération GPU ​ Le rendu par l'acceleration GPU signifie que le GPU est utilisé pour la composition. The benefit of this mode is that WebGL and 3D CSS animations are supported. There are two different approaches depending on the webPreferences.offscreen.useSharedTexture setting. * Use GPU shared texture Used when webPreferences.offscreen.useSharedTexture is set to true . This is an advanced feature requiring a native node module to work with your own code. The frames are directly copied in GPU textures, thus this mode is very fast because there's no CPU-GPU memory copies overhead, and you can directly import the shared texture to your own rendering program. You can read more details here . * Use CPU shared memory bitmap Used when webPreferences.offscreen.useSharedTexture is set to false (default behavior). The texture is accessible using the NativeImage API at the cost of performance. The frame has to be copied from the GPU to the CPU bitmap which requires more system resources, thus this mode is slower than the Software output device mode. But it supports GPU related functionalities. Périphérique d'affichage logiciel ​ This mode uses a software output device for rendering in the CPU, so the frame generation is faster than shared memory bitmap GPU accelerated mode. To enable this mode, GPU acceleration has to be disabled by calling the app.disableHardwareAcceleration() API. Exemple ​ docs/fiddles/features/offscreen-rendering ( 43.4.0 ) Open in Fiddle * main.js const { app , BrowserWindow } = require ( 'electron/main' ) const fs = require ( 'node:fs' ) const path = require ( 'node:path' ) app . disableHardwareAcceleration ( ) function createWindow ( ) { const win = new BrowserWindow ( { width : 800 , height : 600 , webPreferences : { offscreen : true } } ) win . loadURL ( 'https://github.com' ) win . webContents . on ( 'paint' , ( event , dirty , image ) => { fs . writeFileSync ( 'ex.png' , image . toPNG ( ) ) } ) win . webContents . setFrameRate ( 60 ) console . log ( ` The screenshot has been successfully saved to ${ path . join ( process . cwd ( ) , 'ex.png' ) } ` ) } app . whenReady ( ) . then ( ( ) => { createWindow ( ) app . on ( 'activate' , ( ) => { if ( BrowserWindow . getAllWindows ( ) . length === 0 ) { createWindow ( ) } } ) } ) app . on ( 'window-all-closed' , ( ) => { if ( process . platform !== 'darwin' ) { app . quit ( ) } } ) Après avoir lancé l'application Electron, accédez au dossier contenant votre application et vous y trouverez l'image du rendu. Modifier cette page Précédent Notifications Suivant Détection des événements en ligne/hors ligne * Vue d'ensemble * Mode de rendu * Accélération GPU * Périphérique d'affichage logiciel * Exemple Documentation * Démarrer * Référence des APIs Listes de vérifications * Performance * Sécurité Outils * Electron Forge * Fiddle Electron Communauté * Gouvernance * Ressources * Discord * Bluesky * X * Mastodon * Stack Overflow En plus * GitHub * Open Collective * Tableau de bord de l'infrastructure Copyright Fondation OpenJS et contributeurs Electron. Tous droits réservés. La Fondation OpenJS a déposé des marques commercials et utilise des marques déposées. Pour une liste de marques commerciales de la Fondation OpenJS , merci de consulter notre Politique de Marque Comemrciale et Liste de Marques Commerciales . Les marques commerciales et logos qui ne sont pas indiquées sur la liste des marques commerciales de la Fondation OpenJS sont les marques commerciales™ ou marques déposées® de leurs détenteurs respectifs. Leur utilisation n'implique pas la moindre affiliation ou approbation de leur part. La Fondation OpenJS | Conditions Générales d'Utilisation | Politique de Confidentialité | Règlement intérieur | Code de Conduite | Politique de Marques Commerciales | Liste des Marques Commerciales | Politique de Cookies Hosting and infrastructure graciously provided by