Ich möchte ein Farbauswahlfeld (Fabrpicker) zur Verfügung stellen, wo man aus den möglichen TrueColor-Farben eine auswählen kann. In den DIV soll man dann mit der Mau klicken können um die Farbe auszuwählen, die eben an der Stelle ist. Dazu müssen dann die Gradients noch manipuliert werden,damit man alle Farben erhält. Aber das erst der nächste Schritt.
Code
<style>
*{
margin:0;
padding:0;
}
body,main{
width:300px;
}
#out{
text-align:center;
position:absolute;
top:200px;
font-size:30px;
height:40px;
width:300px;
}
canvas{
height:150px;
width:300px;
}
</style>
<body>
<div id="out"></div>
<main>
</main>
<script>
var x = null;
var y = null;
var myImg = new Image();
myImg.src = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'> <foreignObject width='300px' height='300px'> <div style='display:block;margin:0;padding:0;height:150px;width:300px;background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);' xmlns='http://www.w3.org/1999/xhtml'></div> </foreignObject> </svg>";
var canvas = document.createElement("canvas");
var myContext = canvas.getContext("2d");
myImg.onload = function() {
myContext.drawImage(myImg, 0, 0);
};
document.getElementsByTagName('main')[0].appendChild(canvas);
document.addEventListener('mousemove', function(e){
x = e.pageX;
y = e.pageY;
const myRGBA_Array = myContext.getImageData(x, y, 1, 1).data;
const ou=document.getElementById('out');
const rgb="rgba(" + myRGBA_Array[0] + "," + myRGBA_Array[1] + "," + myRGBA_Array[2] + "," + myRGBA_Array[3] + ")";
ou.innerHTML=rgb;
ou.style.background=rgb;
}, false);
</script>
</body>