Elegir un color de una imagen usando Canvas y JavaScript

Vista prévia

Descripción

Una solución simple de JavaScript puro para seleccionar un color y obtener el código de color HTML (RGB o HEX) al hacer clic en una imagen, similar a la herramienta de selector de color en Photoshop. Basado en HTML5 Canvas Tag que le permite obtener los datos de color de una imagen dada y aplicar el color RGB o HEX a cualquier elemento HTML. Creado por < a href = "https://codepen.io/nakome" target = "_ blank" rel = "noopener" > nakome .

Funcionamiento

Asegúrese de convertir la imagen en < a href = "http://webcodertools.com/imagetobase64converter" target = "_ blank" rel = "noopener" > Base64 string formato y la inserción en el documento.

<div class="thumbnail">

<div class="preview"></div>

<img alt="" src="BASE64 IMAGE">
</div>

Cree un elemento Canvas en el documento.

<canvas id="cs"></canvas>

Asegúrese de que el elemento Canvas está oculto.

#cs{

 display:none;
}

Cree un contenedor para generar la información de color.

<div class="result">

<span>HEX: #22142b</span>

<span>RGB: rgb(34,20,43)</span>
 </div>

JavaScript para habilitar el selector de color y aplicar el color seleccionado al cuerpo del documento.

var img = _('.thumbnail img'),

canvas = _('#cs'),

result = _('.result'),

preview = _('.preview'),x = '',y = '';

img.addEventListener('click', function(e){

if(e.offsetX) {

x = e.offsetX;

y = e.offsetY;

 }

else if(e.layerX) {

x = e.layerX;

y = e.layerY;

}

useCanvas(canvas,img,function(){

var p = canvas.getContext('2d')

.getImageData(x, y, 1, 1).data;

result.innerHTML = '<span>HEX: '+rgbToHex(p[0],p[1],p[2])+'</span>'+

 '<span>RGB:
rgb('+


p[0]+','+


p[1]+','+


p[2]+')</span>';



document.body.style.background =rgbToHex(p[0],p[1],p[2]);

});
},false);

img.addEventListener('mousemove', function(e){

if(e.offsetX) {

x = e.offsetX;

y = e.offsetY;

 }

else if(e.layerX) {

x = e.layerX;

y = e.layerY;

}



useCanvas(canvas,img,function(){



var p = canvas.getContext('2d')

.getImageData(x, y, 1, 1).data;

preview.style.background = rgbToHex(p[0],p[1],p[2]);

});
},false);

function useCanvas(el,image,callback){

el.width = image.width;

el.height = image.height;

 el.getContext('2d')

.drawImage(image, 0, 0, image.width, image.height);

return callback();
}

function _(el){

return document.querySelector(el);
};

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;
}