eyedropper api
Ermittle die Farbe unter der Maus , auch außehalb des Browsers
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<!doctype html>
<html lang="de">
<head>
<title>Exedropper testen</title>
<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>
</head>
<body>
<button id="start-button">Open the eyedropper</button>
<span id="result"></span>
<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);
}
});
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>
</body>
</html>