javascript - tainted - Cambio de píxeles en lienzo imageData a hsl(60, 100%, 50%)

putimagedata

Question

Me gustaría cambiar los píxeles de un HTML5 canvas a un valor hsl . Podría ser cualquier valor hsl que elija el usuario.

Puedo obtener el canvas imageData con var imageData = canvas.getImageData(0, 0, 200, 200);

Pero la matriz imageData.data contiene valores en rgba . En realidad, cada valor en la matriz es un byte, entonces -

data[0] = r, data[1] = b, data[2] = g, data[3] = a, data[4] = r, data[5] = b, data[6] = g, data[7] = a etc.

¿Hay una api que se puede usar para manipular imageData? Una api que data[0] = rgba, data[1] = rgba los datos brutos de modo que - data[0] = rgba, data[1] = rgba etc.

Y eso podría tener métodos como - data[0].setValueHSL(60, 100%, 50%);

Si esta API no existe, ¿existe una clase que pueda crear / representar un valor hsl y que pueda convertir el valor a rgb?

Answer 1

No estoy seguro de si todavía está buscando la respuesta, ya que esto fue preguntado hace mucho tiempo. Pero estaba tratando de hacer lo mismo y encontré la respuesta sobre ¿Por qué no funciona este código Javascript RGB a HSL? , Esto debería funcionar :

function rgbToHsl(r, g, b) {
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if (max == min) {
h = s = 0; // achromatic
} else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return ''hsl('' + Math.floor(h * 360) + '','' + Math.floor(s * 100) + ''%,'' + Math.floor(l * 100) + ''%)'';
}

Answer 2

Podrías escribir uno tan simple como esto

parseImageData = function(imageData) {
var newImageData = [];
for ( var i = imageData - 1; i>0; i-4) {
newImageData.push([ imageData[i],
imageData[i-1],
imageData[i-2],
imageData[i-3] ]);
}
return newImageData;
}

entonces si quieres convertirlo de nuevo

parseNewImageData = function ( newImageData ) {
var imageData = [];
for ( var i = newImageData - 1; i>=0; --i) {
imageData.push( imageData[i][0] );
imageData.push( imageData[i][1] );
imageData.push( imageData[i][2] );
imageData.push( imageData[i][3] );
}
return imageData;
}

¡súper fácil y puedes hacer que haga específicamente lo que necesitas!

¡Espero que esto ayude!