5

Estoy queriendo hacer un color picker para un proyecto que tengo, y estoy buscando la manera de poder detectar el color sobre el cual me posiciono. Mi pregunta ¿Existe algún método con javascript o jQuery para detectar el color del punto exacto?

Dejo el link de lo que viene siendo el prototipo hasta ahora.

$('.bg-selection .bg-pointer').draggable({
    axis: 'x',
    containment: "parent"
});
$('.bg-principal .bg-pointer').each(function(){ 
    var point = $(this).outerWidth() / 2;
    var parent = $(this).parent('.bg-principal');
    var width = $(parent).outerWidth();
    var height = $(parent).outerHeight();
    var top = $(parent).offset().top;
    var left = $(parent).offset().left;
    var x1 = left - point,
        y1 = top - point,
        x2 = width + left  - point,
        y2 = height + top - point;
    $(this).draggable({
        containment: [x1, y1, x2, y2]
    });
})
$('.bg-principal').click(function(ev){
    //console.log(ev)
    var bg_pointer = $(this).find('.bg-pointer')
    var x = ev.offsetX;
    var y = ev.offsetY;
    var point = $(bg_pointer).outerWidth() / 2
    $(bg_pointer).css({
        'top': `${y - point}px`,
        'left': `${x - point}px`
    })
})
$('.bg-all, .bg-transparent').click(function(ev){
    var bg_pointer = $(this).find('.bg-pointer')
    var x = ev.offsetX;
    var point = $(bg_pointer).outerWidth() / 2
    $(bg_pointer).css({
        'left': `${x - point}px`
    })
})
.inputField .colors-box{
    position: relative;
    width: 300px;
    border: 1px solid silver;
    border-radius: 5px;
    box-shadow: 0px 0px 4px silver;
    overflow: hidden;
}
.inputField .colors-box .bg-principal{
    width: 100%;
    height: 170px;
    position: relative;
    background-color: red;
    overflow: hidden;
}
.inputField .colors-box .bg-principal .bg-color-black{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: linear-gradient(to bottom, transparent 0%, #000 100%);
    z-index: 1;
}
.inputField .colors-box .bg-principal .bg-color-white{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0) 100%);
    z-index: 0;
}
.inputField .colors-box .bg-principal .bg-pointer{
    width: 15px;
    height: 15px;
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    border: 1px solid black;
    overflow: hidden;
}
.inputField .colors-box .bg-principal .bg-pointer::before{
    content: "";
    width: 11px;
    height: 11px;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    border: 1px solid white;
    z-index: 2;
}
.inputField .colors-box .bg-controls{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
    margin: .5em 0;
    padding: .5em;
}
.inputField .colors-box .bg-color-view{
    min-width: 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: red;
    border: 1px solid silver;
}
.inputField .colors-box .bg-selection{
    position: relative;
    width: 100%;
    padding: 1em;
}
.inputField .colors-box .bg-all{
    width: 100%;
    height: 15px;
    border-radius: 3px;
    background: linear-gradient(to right, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%);
    margin-bottom: .5em;
    position: relative;
}
.inputField .colors-box .bg-transparent .bg-color{
    position: absolute;
    width: 100%;
    height: 100%;
    background:  linear-gradient(to right, transparent 0%, red 100%);
}
.inputField .colors-box .bg-transparent{
    margin-top: .5em;
    position: relative;
    width: 100%;
    height: 15px;
    border-radius: 3px;
    background-image: url('../assets/transparent.jpg');
    background-size: 15px 15px;
}
.inputField .colors-box .bg-transparent .bg-pointer,
.inputField .colors-box .bg-all .bg-pointer{
    width: 8px;
    height: 100%;
    position: absolute;
    left: calc(100% - 8px);
    top: -10%;
    border: 2px solid black;
    border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="inputField">
  <div class="colors-box">
    <div class="bg-principal">
      <div class="bg-color-black"></div>
      <div class="bg-color-white"></div>
      <div class="bg-pointer"></div>
    </div>
    <div class="bg-controls">
      <div class="bg-color-view"></div>
      <div class="bg-selection">
        <div class="bg-all">
          <div class="bg-pointer"></div>
        </div>
        <div class="bg-transparent">
          <div class="bg-color"></div>
          <div class="bg-pointer"></div>
        </div>
      </div>
    </div>
  </div>
</div>

1

2 respuestas 2

5

Tengo buenas y malas noticias:

Las malas

No se puede obtener el color de un pixel concreto de un div.

Las buenas

Se puede obtener el color de un pixel en un canvas:

const canvas = document.querySelector('canvas');
const output= document.querySelector('#output');
const ctx = canvas.getContext('2d');



document.querySelectorAll('button').forEach(b => b.addEventListener('click', () => setColor(b.id)));

function setColor(color) {
  const horizontalGradient = ctx.createLinearGradient(0, canvas.height/2, canvas.width, canvas.height/2);
  const verticalGradient = ctx.createLinearGradient(canvas.width/2, 0, canvas.width/2, canvas.height);
  horizontalGradient.addColorStop(0, 'white');
  horizontalGradient.addColorStop(1, color);
  verticalGradient.addColorStop(0, 'transparent');
  verticalGradient.addColorStop(1, 'black');


  ctx.fillStyle = horizontalGradient;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = verticalGradient;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

canvas.addEventListener('click', function (e) {
  
  const pixel = ctx.getImageData(e.offsetX, e.offsetY, 1, 1).data;
        
  output.innerHTML ='R: ' + pixel[0] + '<br>G: ' + pixel[1] +
      '<br>B: ' + pixel[2];
                
});
canvas {
  background-color: white;
  border: 1px solid gray;
}
canvas,pre {
  display: inline-block;
}
<button id="red">Rojo</button>
<button id="blue">Azul</button>
<button id="green">Verde</button>

<canvas height="180" width="180"></canvas>
<pre id="output"></pre>

3
  • Muchas gracias, pondré a prueba lo que me dices. Saludos Commented el 29 jul. 2019 a las 16:24
  • Funciono de maravilla, gracias. Ahora tengo el siguiente problema, y es que quiero obtener la coordenada exacta con solo saber el color. Ya que si un usuario lo escribe a mano esta se tiene que posicionar automáticamente en el canvas. Commented el 13 ago. 2019 a las 18:05
  • Eso es otra pregunta distinta Commented el 13 ago. 2019 a las 18:09
0

intenta algo asi

$( "Tu_div" ).click(function() {
  var color = $( this ).css( "background-color" );
  alert( "El color es  " + color + "." );
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.