Implementación de ColorPicker utilizando JavaScript y Canvas

html5 html5-canvas

Question

Estoy intentando implementar ColorPicker usando Canvas solo por diversión. Pero parezco perdido. como mi navegador se congela por un tiempo cuando se carga debido a todos estos para bucles. Estoy agregando la captura de pantalla del resultado de este script:

window.onload = function(){
    colorPicker();
}

function colorPicker(){
    var canvas = document.getElementById("colDisp"),
    frame = canvas.getContext("2d");

var r=0,
g=0,
b= 0;

function drawColor(){
   for(r=0;r<255;r++){
      for(g=0;g<255;g++){
         for(b=0;b<255;b++){
            frame.fillStyle="rgb("+r+","+g+","+b+")";
            frame.fillRect(r,g,1,1);
         }
      }
   }
}
drawColor();

Actualmente, solo quiero una solución sobre el problema de congelación con mejor algoritmo y no muestra los colores NEGRO y GRIS. Por favor alguien me ayude

Answer 1

En lugar de llamar a fillRect para cada píxel, puede ser mucho más eficiente trabajar con un buffer RGBA en bruto. Puede obtener uno usando context.getImageData , llenarlo con los valores de color y luego volver a colocarlo de nuevo usando context.putImageData .

Tenga en cuenta que su código actual sobrescribe cada píxel 255 veces, una vez por cada posible valor azul. El pase final en cada píxel es 255 azul, por lo que no verá gris y negro en la salida.

Encontrar una buena forma de asignar todos los valores RGB posibles a una imagen bidimensional no es trivial, porque RGB es un espacio de color tridimensional. Hay muchas estrategias para hacerlo, pero ninguna es realmente óptima para cualquier posible caso de uso. Puede encontrar algunas soluciones creativas para este problema en AllRGB.com . Algunos de ellos pueden ser adecuados para un selector de color para algunos casos de uso.

Answer 2

Si desea buscar el rgba del píxel debajo del mouse, debe usar context.getImageData.

getImageData devuelve una matriz de píxeles.

var pixeldata=context.getImageData(0,0,canvas.width,canvas.height);

Cada píxel está definido por 4 elementos de matriz secuencial.

Entonces, si ha obtenido una matriz de píxeles con getImageData:

// first pixel defined by the first 4 pixel array elements

pixeldata[0]  =  red component of pixel#1
pixeldata[1]  =  green component of pixel#1
pixeldata[2]  =  blue component of pixel#1
pixeldata[4]  =  alpha (opacity) component of pixel#1

// second pixel defined by the next 4 pixel array elements


pixeldata[5]  =  red component of pixel#2
pixeldata[6]  =  green component of pixel#2
pixeldata[7]  =  blue component of pixel#2
pixeldata[8]  =  alpha (opacity) component of pixel#2

Entonces, si tiene un mouseX y mouseY, puede obtener los valores r, g, b, a debajo del mouse, de esta manera:

// get the offset in the array where mouseX,mouseY begin

var offset=(imageWidth*mouseY+mouseX)*4;

// read the red,blue,green and alpha values of that pixel

var red =   pixeldata[offset];
var green = pixeldata[offset+1];
var blue =  pixeldata[offset+2];
var alpha = pixeldata[offset+3];

Aquí hay una demostración que dibuja un colorwheel en el lienzo y muestra el RGBA debajo del mouse:

http://jsfiddle.net/m1erickson/94BAQ/

Answer 3

Un camino por recorrer, usando .createImageData() :

window.onload = function() {

    var canvas = document.getElementById("colDisp");
    var frame = canvas.getContext("2d");
    var width = canvas.width;
    var height = canvas.height;
    var imagedata = frame.createImageData(width, height);

    var index, x, y;

    for (x = 0; x < width; x++) {
        for (y = 0; y < height; y++) {
            index = (x * width + y) * 4;

            imagedata.data[index + 0] = x;
            imagedata.data[index + 1] = y;
            imagedata.data[index + 2] = x + y - 255;
            imagedata.data[index + 3] = 255;
        }
    }

    frame.putImageData(imagedata, 0, 0);
};

http://codepen.io/anon/pen/vGcaF