Created
March 24, 2023 03:27
-
-
Save schrmh/4c2d050d2a14035de2c2ce529f5d8fb4 to your computer and use it in GitHub Desktop.
electron X11 selection test application with JPEG. (Use xclip to check what targets it provides after clicking a button)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Clipboard Example</title> | |
</head> | |
<body> | |
Image stuff (CC0 licensed image):<br> | |
<img id="my-image" /><br> | |
<button id="copy-img-btn_clipboard">Copy JPEG (CLIPBOARD)</button> | |
<button id="copy-img-btn_selection">Copy JPEG (PRIMARY selection)</button> | |
<br><br>Text stuff: | |
<input id="my-input" type="text"><br> | |
<button id="copy-btn">Copy text from text field to CLIPBOARD</button> | |
<button id="paste-btn">Paste text from CLIPBOARD into text field</button> | |
<script src="./renderer.js"></script> | |
<br>Info:<br> | |
1) Click a button to copy either text from the text field or the JPEG to a X11 selection <br> | |
(standard X11 selections: CLIPBOARD; PRIMARY — called "selection" in electron).<br> | |
2) Run this (that you optimally) already have ready to send a terminal<br> | |
(<b>if you copy — for PRIMARY mark — anything else before running this, selection content WILL change</b>):<br> | |
a) To check the (Ctrl+V) CLIPBOARD selection:<br> | |
<b><code>xclip -o -target TARGETS -selection clipboard</code></b><br> | |
2b) To check the (middle click mouse to paste marked text) PRIMARY selection:<br> | |
<b><code>xclip -o -target TARGETS -selection primary</code></b><br> | |
<br> | |
You will then see the targets other applications can ask the application for.<br> | |
E.g. since xclip lists no image/jpeg target for this application despite the image being JPEG...<br> | |
Other apps will likely receive a PNG which might mean more data than it would be necessary... | |
<br> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const { app, BrowserWindow } = require('electron') | |
function createWindow () { | |
const win = new BrowserWindow({ | |
width: 800, | |
height: 600, | |
webPreferences: { | |
nodeIntegration: true, | |
contextIsolation: false, | |
preload: __dirname + '/preload.js' | |
} | |
}) | |
win.loadFile('index.html') | |
} | |
app.whenReady().then(() => { | |
createWindow() | |
app.on('activate', () => { | |
if (BrowserWindow.getAllWindows().length === 0) { | |
createWindow() | |
} | |
}) | |
}) | |
app.on('window-all-closed', () => { | |
if (process.platform !== 'darwin') { | |
app.quit() | |
} | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "zonked-lady-surprise-chxjd", | |
"productName": "zonked-lady-surprise-chxjd", | |
"description": "My Electron application description", | |
"keywords": [], | |
"main": "./main.js", | |
"version": "1.0.0", | |
"author": "duda", | |
"scripts": { | |
"start": "electron ." | |
}, | |
"dependencies": {}, | |
"devDependencies": { | |
"electron": "24.0.0-beta.4" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const { nativeImage, clipboard } = require('electron'); | |
window.nativeImage = nativeImage; | |
window.clipboard = clipboard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const copyBtn = document.getElementById('copy-btn'); | |
const pasteBtn = document.getElementById('paste-btn'); | |
const input = document.getElementById('my-input'); | |
copyBtn.addEventListener('click', () => { | |
clipboard.writeText(input.value); | |
}); | |
pasteBtn.addEventListener('click', () => { | |
const text = clipboard.readText(); | |
input.value = text; | |
}); | |
const img = document.getElementById('my-image'); | |
const copyImgBtn_clipboard_selection = document.getElementById('copy-img-btn_clipboard'); | |
const copyImgBtn_primary_selection = document.getElementById('copy-img-btn_selection'); | |
fetch('https://upload.wikimedia.org/wikipedia/commons/5/57/Centaure.jpeg') | |
.then(response => response.arrayBuffer()) | |
.then(buffer => { | |
const image = nativeImage.createFromBuffer(Buffer.from(buffer)); | |
img.src = image.toDataURL(); | |
}); | |
//Normal paste (Ctrl+V). Check with xclip -o -target TARGETS -selection clipboard: | |
copyImgBtn_clipboard_selection.addEventListener('click', () => { | |
const image = nativeImage.createFromDataURL(img.src); | |
clipboard.writeImage(image, "clipboard"); | |
}); | |
//Middle click button paste. Check with xclip -o -target TARGETS -selection primary | |
copyImgBtn_primary_selection.addEventListener('click', () => { | |
const image = nativeImage.createFromDataURL(img.src); | |
clipboard.writeImage(image, "selection"); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment