<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="micanvas" width="500" height="500"></canvas>
<div id="result"></div>
<body>
</html>
<script>
window.onload=()=>{
const canvas = document.getElementById("micanvas");
const ctx = canvas.getContext("2d");
const img = new Image();
img.src = 'img3.jpg';
img.onload=() => {
ctx.drawImage(img, 0, 0);
}
ctx.fill();
ctx.stroke();
canvas.addEventListener("mousemove", function(e) {
const x=e.clientX-this.offsetLeft;
const y=e.clientY-this.offsetTop;
const data = ctx.getImageData(x, y, 1, 1).data;
const rgb='R:' + data[0] + ' G:' + data[1] + ' B:' + data[2];
const hex="#" + ("000000" + rgbToHex(data[0], data[1], data[2])).slice(-6);
document.getElementById("result").innerHTML="RGB: "+rgb+" - Hex:"+hex;
});
}
function rgbToHex(r, g, b) {
if (r > 255 || g > 255 || b > 255)
throw "Invalid color component";
return ((r << 16) | (g << 8) | b).toString(16);
}
</script>
Comentarios sobre la versión: Versión 1.0 (0)
No hay comentarios