My current code allows users to select a color from an image when hovering over the pixel with the mouse. However, I am encountering an issue where the colors do not map correctly when using object-fit: contain for the image. The script seems to be treating the image as if it is stretched to 100% width / 100% height and not considering the object-fit: contain style.
<html>
<head>
<style>
*,*:after,*:before{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
body{
width:100%;
height:100%;
position:relative;
}
.thumbnail{
position:relative;
display: block;
overflow:hidden;
height:100%;
width:100%;
}
.thumbnail img {
display: block;
cursor: crosshair;
height: 100%;
width: 100%;
object-fit: contain;
}
#follow {
position: absolute;
width: 55px;
height: 55px;
border-radius:80%;
z-index: 99 !important;
border:2px solid black;
}
#cs{
display:none;
}
#color{
display:none;
}
}
</style>
</head>
<body>
<form id=color>
<input id="hex" type="text" value="hex">
</form>
<div class="preview" id="follow"></div>
<div class="thumbnail">
<img src='[BASE64 IMAGE GOES HERE]'/>
</div>
<canvas id="cs"></canvas>
<script>
// preview follow mouse
$(document).mousemove(function(e) {
$("#follow").css({
left: e.offsetX,
top: e.offsetY
});
});
// vars
var img = _('.thumbnail img'),
canvas = _('#cs'),
preview = _('.preview'),x = '',y = '';
// click function
img.addEventListener('click', function(e){
// chrome
if(e.offsetX) {
x = e.offsetX;
y = e.offsetY;
}
// firefox
else if(e.layerX) {
x = e.layerX;
y = e.layerY;
}
useCanvas(canvas,img,function(){
// get image data
var p = canvas.getContext('2d')
.getImageData(x, y, 1, 1).data;
// show info
color.innerHTML = '<textarea id="hex" type="text" >'+rgbToHex(p[0],p[1],p[2])+'</textarea>';
});
},false);
// preview function mousemove
img.addEventListener('mousemove', function(e){
// chrome
if(e.offsetX) {
x = e.offsetX;
y = e.offsetY;
}
// firefox
else if(e.layerX) {
x = e.layerX;
y = e.layerY;
}
useCanvas(canvas,img,function(){
// get image data
var p = canvas.getContext('2d')
.getImageData(x, y, 1, 1).data;
// show preview color
preview.style.background = rgbToHex(p[0],p[1],p[2]);
});
},false);
// canvas function
function useCanvas(el,image,callback){
el.width = image.width; // img width
el.height = image.height; // img height
// draw image in canvas tag
el.getContext('2d')
.drawImage(image, 0, 0, image.width, image.height);
return callback();
}
// short querySelector
function _(el){
return document.querySelector(el);
};
// convert rgba to hex
// http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
function findPos(obj) {
var curleft = 0, curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return { x: curleft, y: curtop };
}
return undefined;
}
</script>
</body>
</html>