eyedropper api

Ermittle die Farbe unter der Maus , auch außehalb des Browsers

Der hier verwendete Code

<style> body{ height:100vh; width:100vw; display:flex; flex-direction:column; margin:0; padding:0; } button{ font-size:30px; margin:10px; } #result{ font-size:calc(25vw); color:#000; text-shadow:10px 10px 1px white; text-align:center; } </style> <body> <button id="start-button">Open the eyedropper</button> <span id="result"></span> </body> <script> document.getElementById('start-button').addEventListener('click', () => { const resultElement = document.getElementById('result'); if (!window.EyeDropper) { resultElement.textContent = 'Your browser does not support the EyeDropper API'; return; } const eyeDropper = new EyeDropper(); eyeDropper.open().then(result => { resultElement.textContent = result.sRGBHex; resultElement.style.backgroundColor = result.sRGBHex; }).catch(e => { resultElement.textContent = e; }); }); new PerformanceObserver((list) => { console.log(list.getEntries()); }).observe({type: 'layout-shift', buffered: true}); var observer = new PerformanceObserver(function(list) { var perfEntries = list.getEntries(); for (var i = 0; i < perfEntries.length; i++) { console.log(perfEntries); } }); // register observer for long task notifications observer.observe({entryTypes: ["longtask"]}); var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; var type = connection.effectiveType; function updateConnectionStatus() { console.log("Connection type changed from " + type + " to " + connection.effectiveType); type = connection.effectiveType; } connection.addEventListener('change', updateConnectionStatus); </script>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!