html5 - img html url

Contraste de imagen de lienzo HTML5 (7)

Descubrí que tiene que usar el efecto separando los oscuros y las luces o, técnicamente, cualquier cosa que sea menor a 127 (promedio de R + G + B / 3) en la escala rgb es negra y más de 127 es blanca, por lo tanto por tu nivel de contraste, menos un valor, di 10 contraste de los negros y agrega el mismo valor a los blancos!

Este es un ejemplo: tengo dos píxeles con colores RGB, [105,40,200] | [255,200,150] Así que sé que para mi primer píxel 105 + 40 + 200 = 345, 345/3 = 115 y 115 es menor que mi mitad de 255, que es 127, por lo que considero que el píxel está más cerca de [0,0,0] therefore if I want to minus 10 contrast then I take away 10 from each color on it''s average Thus I have to divide each color''s value by the total''s average which was 115 for this case and times it by my contrast and minus out the final value from that specific color:

Por ejemplo, tomaré 105 (rojo) de mi píxel, así que lo dividiré por el promedio total de RGB. que es 115 y lo multiplica por mi valor de contraste de 10, (105/115) * 10 que te da algo alrededor de 9 (¡tienes que redondearlo!) y luego quita ese 9 de 105 para que el color se convierta en 96, así que mi Rojo después de tener un contraste de 10 en un píxel oscuro.

Así que si voy en los valores de mi píxel se convierten en [96,37,183]! (nota: la escala de contraste es tuya, pero al final deberías convertirla en una escala de 1 a 255)

Para los píxeles más claros, también hago lo mismo, excepto que en lugar de restar el valor de contraste, ¡lo agrego! y si alcanza el límite de 255 o 0, entonces detiene su suma y resta para ese color específico. por lo tanto, mi segundo píxel, que es un píxel más claro, se convierte en [255,210,157]

A medida que agregue más contraste, se aclararán los colores más claros y se oscurecerá más y, por lo tanto, agregará contraste a su imagen.

Aquí hay una muestra de código Javascript (no lo he probado todavía):

var data = imageData.data; for (var i = 0; i < data.length; i += 4) { var contrast = 10; var average = Math.round( ( data[i] + data[i+1] + data[i+2] ) / 3 ); if (average > 127){ data[i] += ( data[i]/average ) * contrast; data[i+1] += ( data[i+1]/average ) * contrast; data[i+2] += ( data[i+2]/average ) * contrast; }else{ data[i] -= ( data[i]/average ) * contrast; data[i+1] -= ( data[i+1]/average ) * contrast; data[i+2] -= ( data[i+2]/average ) * contrast; } }

He estado escribiendo un programa de procesamiento de imágenes que aplica efectos a través del procesamiento de píxeles de lienzo HTML5. He logrado las manipulaciones de píxeles Thresholding, Vintaging y ColorGradient, pero increíblemente no puedo cambiar el contraste de la imagen. He intentado varias soluciones, pero siempre tengo demasiado brillo en la imagen y menos efecto de contraste y no planeo usar ninguna biblioteca de JavaScript ya que estoy tratando de lograr estos efectos de forma nativa.

El código básico de manipulación de píxeles:

var data = imageData.data; for (var i = 0; i < data.length; i += 4) { //Note: data[i], data[i+1], data[i+2] represent RGB respectively data[i] = data[i]; data[i+1] = data[i+1]; data[i+2] = data[i+2]; }

Ejemplo de manipulación de píxeles.

Los valores están en modo RGB, lo que significa que los datos [i] son el color rojo. Entonces, si datos [i] = datos [i] * 2; el brillo se aumentará a dos veces para el canal rojo de ese píxel. Ejemplo:

var data = imageData.data; for (var i = 0; i < data.length; i += 4) { //Note: data[i], data[i+1], data[i+2] represent RGB respectively //Increases brightness of RGB channel by 2 data[i] = data[i]*2; data[i+1] = data[i+1]*2; data[i+2] = data[i+2]*2; }

* Nota: ¡No les estoy pidiendo a ustedes que completen el código! ¡Eso sería un favor! Estoy pidiendo un algoritmo (incluso pseudo código) que muestre cómo es posible el contraste en la manipulación de píxeles. Me alegraría si alguien pudiera proporcionar un buen algoritmo para Contraste de imagen en el lienzo HTML5.

Después de intentar la respuesta de Schahriar Saffar Shargh, no se comportaba como debería comportarse el contraste. ¡Finalmente encontré este algoritmo, y funciona como un encanto!

Para obtener información adicional sobre el algoritmo, lea este artículo y la sección de comentarios.

function contrastImage(imageData, contrast) { var data = imageData.data; var factor = (259 * (contrast + 255)) / (255 * (259 - contrast)); for(var i=0;i<data.length;i+=4) { data[i] = factor * (data[i] - 128) + 128; data[i+1] = factor * (data[i+1] - 128) + 128; data[i+2] = factor * (data[i+2] - 128) + 128; } return imageData; }

Uso:

var newImageData = contrastImage(imageData, 30);

Esperemos que esto sea un ahorro de tiempo para alguien. ¡Aclamaciones!

Una opción más rápida (basada en el enfoque de Escher ) es:

function contrastImage(imgData, contrast){ //input range [-100..100] var d = imgData.data; contrast = (contrast/100) + 1; //convert to decimal & shift range: [0..2] var intercept = 128 * (1 - contrast); for(var i=0;i<d.length;i+=4){ //r,g,b,a d[i] = d[i]*contrast + intercept; d[i+1] = d[i+1]*contrast + intercept; d[i+2] = d[i+2]*contrast + intercept; } return imgData; }

Derivación similar a la siguiente; esta versión es matemáticamente la misma, pero corre mucho más rápido.

Respuesta original

Aquí hay una versión simplificada con una explicación de un enfoque ya discutido (que se basó en este artículo ):

function contrastImage(imageData, contrast) { // contrast as an integer percent var data = imageData.data; // original array modified, but canvas not updated contrast *= 2.55; // or *= 255 / 100; scale integer percent to full range var factor = (255 + contrast) / (255.01 - contrast); //add .1 to avoid /0 error for(var i=0;i<data.length;i+=4) //pixel values in 4-byte blocks (r,g,b,a) { data[i] = factor * (data[i] - 128) + 128; //r value data[i+1] = factor * (data[i+1] - 128) + 128; //g value data[i+2] = factor * (data[i+2] - 128) + 128; //b value } return imageData; //optional (e.g. for filter function chaining) }

Notas

He elegido utilizar un rango de contrast de +/- 100 lugar del original +/- 255 . Un valor de porcentaje parece más intuitivo para los usuarios o programadores que no entienden los conceptos subyacentes. Además, mi uso siempre está vinculado a los controles de UI; un rango de -100% a + 100% me permite etiquetar y enlazar el valor de control directamente en lugar de ajustarlo o explicarlo.
Este algoritmo no incluye la verificación de rango, aunque los valores calculados pueden exceder por mucho el rango permitido , esto se debe a que la matriz subyacente al objeto ImageData es un Uint8ClampedArray . Como explica MSDN , con un Uint8ClampedArray la verificación del rango se maneja por usted:

"si especificó un valor que está fuera del rango de [0,255], se establecerán 0 o 255 en su lugar".

Uso

Tenga en cuenta que, si bien la fórmula subyacente es bastante simétrica (permite el disparo de ida y vuelta), los datos se pierden en niveles altos de filtrado porque los píxeles solo permiten valores enteros. Por ejemplo, cuando des-saturas una imagen a niveles extremos (> 95% aproximadamente), todos los píxeles son básicamente un gris medio uniforme (dentro de unos pocos dígitos del valor promedio posible de 128). Al volver a activar el contraste, se obtiene una gama de colores plana.

Además, el orden de las operaciones es importante cuando se aplican múltiples ajustes de contraste: los valores saturados "soplan" (exceden el valor máximo fijado de 255) rápidamente, lo que significa que la saturación alta y la saturación resultarán en una imagen más oscura en general. Sin embargo, la saturación y la saturación no tienen tanta pérdida de datos, ya que los valores de resaltado y sombra se silencian, en lugar de recortarse (consulte la explicación a continuación).

En términos generales, cuando se aplican varios filtros, es mejor comenzar cada operación con los datos originales y volver a aplicar cada ajuste por turno, en lugar de intentar revertir un cambio previo, al menos para la calidad de la imagen. La velocidad de rendimiento u otras demandas pueden dictar de manera diferente para cada situación.

Ejemplo de código:

canvas {width: 100px; height: 100px} div {text-align:center; width:120px; float:left}

Explicación

( Descargo de responsabilidad: no soy especialista en imágenes ni matemático. Estoy tratando de proporcionar una explicación de sentido común con detalles técnicos mínimos. Algunos ejemplos a continuación, por ejemplo, 255 = 256 para evitar problemas de indexación, y 127.5 = 128, para simplificar los numeros. )

Dado que, para un píxel dado, el número posible de valores distintos de cero para un canal de color es 255 , el valor promedio de "sin contraste" es de 128 (o 127, o 127.5 si quiere argumentar, pero la diferencia). es despreciable). Para los propósitos de esta explicación, la cantidad de "contraste" es la distancia desde el valor actual al valor promedio (128) . Ajustar el contraste significa aumentar o disminuir la diferencia entre el valor actual y el valor promedio.

El problema que el algoritmo resuelve entonces es:

Elija un factor constante para ajustar el contraste
Para cada canal de color de cada píxel, escale el "contraste" (distancia del promedio) por ese factor constante

O, como se insinuó en la especificación de CSS , simplemente seleccionando la pendiente y la intersección de una línea:

<feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>

Tenga en cuenta el término type=''linear'' ; Estamos haciendo un ajuste de contraste lineal en el espacio de color RGB , en oposición a una función de escalamiento cuadrático, luminence-based ajuste luminence-based o una comparación de histogramas .

Si recuerdas la clase de geometría, la fórmula para una línea es y=mx+b . y es el valor final que buscamos, la pendiente m es el contraste (o factor ), x es el valor de píxel inicial b es la intersección del eje y (x = 0), que desplaza la línea verticalmente. Recuerde también que dado que el intercepto y no está en el origen (0,0), la fórmula también se puede representar como y=m(xa)+b , donde a es el desplazamiento x que desplaza la línea horizontalmente.

Para nuestros propósitos, este gráfico representa el valor de entrada (eje x) y el resultado (eje y). Ya sabemos que b , el intercepto y (para m=0 , sin contraste) debe ser 128 (que podemos comparar con el 0.5 de la especificación - 0.5 * el rango completo de 256 = 128). x es nuestro valor original, por lo que todo lo que necesitamos es averiguar la pendiente m y el desplazamiento x a .

Primero, la pendiente m es "aumento sobre la carrera", o (y2-y1)/(x2-x1) , por lo que necesitamos 2 puntos que se sabe que están en la línea deseada. Encontrar estos puntos requiere reunir algunas cosas:

Nuestra función toma la forma de un gráfico de intercepción de línea
La intersección con y está en b = 128 , independientemente de la pendiente (contraste).
El valor máximo esperado de ''y'' es 255 y el mínimo es 0
El rango de valores posibles de ''x'' es 256
Un valor neutral siempre debe permanecer neutral: 128 => 128 independientemente de la pendiente
Un ajuste de contraste de 0 debe producir ningún cambio entre la entrada y la salida; es decir, una pendiente de 1: 1.

Tomando todos estos elementos juntos, podemos deducir que, independientemente del contraste (pendiente) aplicado, nuestra línea resultante se centrará en (y 128,128 ) 128,128 . Como nuestra intercepción en y es distinta de cero, la intersección x también es distinta de cero; sabemos que el rango x es 256 ancho y está centrado en el medio, por lo que debe compensarse en la mitad del rango posible: 256/2 = 128.

Así que ahora para y=m(xa)+b , sabemos todo excepto m . Recordemos dos puntos más importantes de la clase de geometría:

Las líneas tienen la misma pendiente incluso si su ubicación cambia; es decir, m permanece igual independientemente de los valores de a y b .
La pendiente de una línea se puede encontrar usando 2 puntos en la línea

Para simplificar la discusión de la pendiente, movamos el origen de las coordenadas a la intersección x (-128) e ignoremos a y b por un momento. Nuestra línea original ahora girará a través de (0,0), y sabemos que un segundo punto en la línea se encuentra fuera del rango completo de x (entrada) e y (salida) en (255,255).

Dejaremos que la nueva línea gire en (0,0), por lo que podemos usar eso como uno de los puntos de la nueva línea que seguirá nuestra pendiente de contraste final m . El segundo punto se puede determinar moviendo el extremo actual en (255,255) una cierta cantidad; Ya que estamos limitados a una sola entrada ( contrast ) y al usar una función lineal, este segundo punto se moverá por igual en las direcciones x e y en nuestro gráfico.

Las coordenadas (x, y) de los 4 nuevos puntos posibles serán 255 +/- contrast . Ya que aumentar o disminuir tanto x como y nos mantendría en la línea original de 1: 1, solo veamos +x, -y y -x, +y como se muestra.

La línea más pronunciada (-x, + y) está asociada con un ajuste de contrast positivo; sus coordenadas (x, y) son ( 255 - contrast , 255 + contrast ). Las coordenadas de la línea menos profunda ( contrast negativo) se encuentran de la misma manera. Tenga en cuenta que el mayor valor significativo del contrast será 255 : lo máximo que el punto inicial de (255,255) se puede traducir antes, dando como resultado una línea vertical (contraste total, todo blanco o negro) o una línea horizontal (sin contraste, todo gris) ).

Así que ahora tenemos las coordenadas de dos puntos en nuestra nueva línea - (0,0) y ( 255 - contrast , 255 + contrast ). Lo insertamos en la ecuación de pendiente, y luego lo insertamos en la ecuación de línea completa, usando todas las partes de antes:

y = m(xa) + b

m = (y2-y1)/(x2-x1) =>
((255 + contrast) - 0)/((255 - contrast) - 0) =>
(255 + contrast)/(255 - contrast)

a = 128
b = 128

y = (255 + contrast)/(255 - contrast) * (x - 128) + 128 QED

La mentalidad matemática notará que la m o el factor resultante es un valor escalar (sin unidades); puede usar cualquier rango que desee para el contrast siempre que coincida con la constante ( 255 ) en el cálculo del factor . Por ejemplo, un rango de contrast de +/-100 y factor = (100 + contrast)/(100.01 - contrast) , que se usó realmente para eliminar el paso de escalado a 255; Acabo de dejar 255 en el código de la parte superior para simplificar la explicación.

Nota sobre la "magia" 259

El artículo de origen utiliza una "magia" 259, aunque el autor admite que no recuerda por qué:

"No puedo recordar si lo he calculado yo mismo o si lo he leído en un libro o en línea".

259 debería ser realmente 255 o quizás 256: el número de posibles valores distintos de cero para cada canal de cada píxel. Tenga en cuenta que en el cálculo del factor original, 259/255 se cancela - técnicamente 1.01, pero los valores finales son enteros enteros, por lo que 1 para todos los propósitos prácticos. Así que este término externo puede ser descartado. Sin embargo, el uso de 255 para la constante en el denominador, introduce la posibilidad de un error de división por cero en la fórmula; el ajuste a un valor ligeramente mayor (por ejemplo, 259) evita este problema sin introducir un error significativo en los resultados. Elegí usar 255.01 en lugar de eso, ya que el error es menor y (con suerte) parece menos "mágico" para un recién llegado.

Sin embargo, por lo que puedo decir, no hace mucha diferencia la que use , obtendrá valores idénticos, excepto por pequeñas diferencias simétricas en una banda estrecha de valores de bajo contraste con un aumento de contraste positivo bajo. Tendría curiosidad por redondear ambas versiones repetidamente y compararlas con los datos originales, pero esta respuesta ya tomó demasiado tiempo. :)

Esta es la fórmula que estás buscando ...

var data = imageData.data; if (contrast > 0) { for(var i = 0; i < data.length; i += 4) { data[i] += (255 - data[i]) * contrast / 255; // red data[i + 1] += (255 - data[i + 1]) * contrast / 255; // green data[i + 2] += (255 - data[i + 2]) * contrast / 255; // blue } } else if (contrast < 0) { for (var i = 0; i < data.length; i += 4) { data[i] += data[i] * (contrast) / 255; // red data[i + 1] += data[i + 1] * (contrast) / 255; // green data[i + 2] += data[i + 2] * (contrast) / 255; // blue } }

¡Espero eso ayude!

Esta implementación de javascript cumple con la definición de "contraste" SVG / CSS3 (y el siguiente código representará su imagen de lienzo de manera idéntica):

/*contrast filter function*/ //See definition at https://drafts.fxtf.org/filters/#contrastEquivalent //pixels come from your getImageData() function call on your canvas image contrast = function(pixels, value){ var d = pixels.data; var intercept = 255*(-value/2 + 0.5); for(var i=0;i<d.length;i+=4){ d[i] = d[i]*value + intercept; d[i+1] = d[i+1]*value + intercept; d[i+2] = d[i+2]*value + intercept; //implement clamping in a separate function if using in production if(d[i] > 255) d[i] = 255; if(d[i+1] > 255) d[i+1] = 255; if(d[i+2] > 255) d[i+2] = 255; if(d[i] < 0) d[i] = 0; if(d[i+1] < 0) d[i+1] = 0; if(d[i+2] < 0) d[i+2] = 0; } return pixels; }

Puedes echar un vistazo a los documentos de OpenCV para ver cómo puedes lograr esto: Ajustes de brillo y contraste .

Luego está el código de demostración:

double alpha; // Simple contrast control: value [1.0-3.0] int beta; // Simple brightness control: value [0-100] for( int y = 0; y < image.rows; y++ ) { for( int x = 0; x < image.cols; x++ ) { for( int c = 0; c < 3; c++ ) { new_image.at<Vec3b>(y,x)[c] = saturate_cast<uchar>( alpha*( image.at<Vec3b>(y,x)[c] ) + beta ); } } }

que imagino que eres capaz de traducir a javascript.

Suponiendo que estoy tratando de aplicar LUTS ... Recientemente he estado tratando de agregar tratamientos de color a las ventanas de lienzo. Si realmente desea aplicar "LUTS" a la ventana del lienzo, creo que necesita mapear realmente la matriz que imageData vuelve a la matriz RGB de la LUT.

(De la ilusión de la luz) Como ejemplo, el inicio de una LUT 1D podría verse así: Nota: estrictamente hablando, esto es 3x LUT 1D, ya que cada color (R, G, B) es un LUT 1D.

R, G, B 3, 0, 0 5, 2, 1 7, 5, 3 9, 9, 9

Lo que significa que:

For an input value of 0 for R, G, and B, the output is R=3, G=0, B=0 For an input value of 1 for R, G, and B, the output is R=5, G=2, B=1 For an input value of 2 for R, G, and B, the output is R=7, G=5, B=3 For an input value of 3 for R, G, and B, the output is R=9, G=9, B=9

Lo que es una LUT extraña, pero se ve que para un valor dado de entrada R, G o B, hay un valor dado de salida R, G y B.

Entonces, si un píxel tuviera un valor de entrada de 3, 1, 0 para RGB, el píxel de salida sería 9, 2, 0.

Durante esto también me di cuenta después de jugar con imageData que devuelve un Uint8Array y que los valores en esa matriz son decimales. La mayoría de las LUTS 3D son Hex. Por lo tanto, primero tiene que hacer algún tipo de hexadecimal para reducir la conversión en toda la matriz antes de todo este mapeo.