Show the captured picture #161

Levminer · Apr 10, 2022 · 865b9e8 · 865b9e8
1 parent 3edcd31
commit 865b9e8
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/app/import/index.html b/app/import/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<!-- meta -->
-		<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'" />
+		<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:" />
 		<meta charset="UTF-8" />
 		<!-- js -->
 		<script defer src="./src/js/index.js"></script>
@@ -148,6 +148,17 @@ <h5 data-loc class="m-0 pt-4 pb-6">Capture a 2FA QR code from your screen.</h5>
 					</svg>
 					<span data-loc>Stop</span>
 				</button>
+				<!-- img -->
+				<div class="thumbnailContainer hidden pb-8">
+					<img class="thumbnail mx-auto w-4/5 rounded-2xl bg-white p-2" src="" />
+
+					<button class="buttoni removeThumbnail mt-8">
+						<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+						</svg>
+						<span>Hide</span>
+					</button>
+				</div>
 			</div>
 		</div>
 	</body>

diff --git a/app/import/src/js/screen.js b/app/import/src/js/screen.js
@@ -1,11 +1,22 @@
+const { dialog, desktopCapturer, BrowserWindow } = require("@electron/remote")
+
 module.exports = {
 	/**
 	 * Read QR code from screen capture
 	 */
 	captureFromScreen: () => {
 		let string = ""
 
-		desktopCapturer.getSources({ types: ["screen"] }).then(async (sources) => {
+		desktopCapturer.getSources({ types: ["screen"], thumbnailSize: { height: 1280, width: 720 } }).then(async (sources) => {
+			const thumbnail = sources[0].thumbnail.toDataURL()
+
+			document.querySelector(".thumbnail").src = thumbnail
+			document.querySelector(".thumbnailContainer").style.display = "block"
+
+			document.querySelector(".removeThumbnail").addEventListener("click", () => {
+				document.querySelector(".thumbnailContainer").style.display = "none"
+			})
+
 			try {
 				const stream = await navigator.mediaDevices.getUserMedia({
 					audio: false,