Valores cmyk en imagen
Soy diseñador gráfico y desde que hice un curso de introducción a la programación no he dejado de estudiar aunque soy un novato.
Me gustaría saber si existe alguna forma de rastrear todos los valores de una imagen, pixel por pixel para saber sus valores RGB o si es posible mejor CMYK.
Para así poder cambiar los valores dependiendo de la composición del pixel.
Si puede ser en lenguaje javascript o php (no tendré tanta suerte)
1 respuesta
Vaya, una pregunta interesante, la verdad es que nunca me lo había planteado.
Investigando un poco he visto que podrías obtener los valores RGB de una imagen píxel a píxel usando el componente canvas de HTML5 y javascript.
Al elementó canvas le podemos inyectar una imagen y nos dota de ciertos métodos para la manipulación de la imagen como el getImageData.
En este ejemplo de jsfiddle puedes verlo en funcionamiento (tan solo pasa el ratón por encima de la imagen para ver el color en el div de abajo de la imagen:
http://jsfiddle.net/vfportero/Rqtnb/
Paso a paso:
En nuestro html tenemos un canvas para pintar la imagen y un div en el que mostraremos el color al pasar por encima con el ratón:
<body> <canvas id="myCanvas"> Tu navegador no es compatible con HTML5 <canvas> <div id="color">Color</div> </body>
En nuestro javascript obtenemos el canvas y su contexto 2d (necesario para pintar la imagen, puedes "pintar" también animaciones en 3d dentro del canvas) y cargamos la imagen:
var color = document.getElementById("color");
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
};
imageObj.crossOrigin = "";
imageObj.src = '
';
';OJO! He tenido problema de CORS al cargar imágenes de lugares externos al que lanza el script por lo que he tenido que agregar la propiedad imageObj.crossOrigin = ""; y usar un servidor de imágenes que si permite CORS como dropbox. En teoría, si la imagen está en tu mismo dominio no debería pasar nada y podrías quitar el crossOrigin = "".
Por último el evento "onmousemove" dentro del canvas nos permite obtener la posición del ratón y obtener la información del pixel de la imagen para pintar el color en el div "color":
canvas.onmousemove = function(e) {
var x = e.clientX;
var y = e.clientY;
// set color now
var canvasColor = context.getImageData(x, y, 1, 1).data; // rgba e [0,255]
var r = canvasColor[0];
var g = canvasColor[1];
var b = canvasColor[2];
color.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
}Como ves, a getImageData() le pasamos primero la posición del canvas que queremos obtener la info y luego el tamaño (en píxeles) del area que queremos obtener (en este caso solo queremos 1 píxel).
Esto nos devuelve un array con el RGB (cada uno en una posición) y el "alpha" en la posición final.
Muchas gracias por tu rapidez y claridad de exposición.
Viendo que muchos programas gráficos utilizan javascript para sus plugins, se podría de igual forma obtener los valores CMYK en vez de RGB, sino directamente, con una conversión de RGB a CMYK?
Si, se puede, he encontrado este método javascript que lo hace:
function rgb2cmyk (r,g,b) {
var computedC = 0;
var computedM = 0;
var computedY = 0;
var computedK = 0;
//remove spaces from input RGB values, convert to int
var r = parseInt( (''+r).replace(/\s/g,''),10 );
var g = parseInt( (''+g).replace(/\s/g,''),10 );
var b = parseInt( (''+b).replace(/\s/g,''),10 );
if ( r==null || g==null || b==null ||
isNaN(r) || isNaN(g)|| isNaN(b) )
{
alert ('Please enter numeric RGB values!');
return;
}
if (r<0 || g<0 || b<0 || r>255 || g>255 || b>255) {
alert ('RGB values must be in the range 0 to 255.');
return;
}
// BLACK
if (r==0 && g==0 && b==0) {
computedK = 1;
return [0,0,0,1];
}
computedC = 1 - (r/255);
computedM = 1 - (g/255);
computedY = 1 - (b/255);
var minCMY = Math.min(computedC,
Math.min(computedM,computedY));
computedC = (computedC - minCMY) / (1 - minCMY) ;
computedM = (computedM - minCMY) / (1 - minCMY) ;
computedY = (computedY - minCMY) / (1 - minCMY) ;
computedK = minCMY;
return [computedC,computedM,computedY,computedK];
}
