Convertir RGB RGBA a tomar en consideración fondo

Duplicar posible:
Convert RGBA color to RGB Convertir RGB RGBA a tomar en consideración fondo

Estoy tratando de convertir un color RGBA, con un alfa < 1 en una representación RGB sólida teniendo en cuenta el color de fondo.

Utilizando el algoritmo proporcionado en this question logro obtener la conversión correcta a un color RGB sólido, PERO SOLO cuando alfa = 0.5.

Aquí está mi código de prueba:

<!DOCTYPE html> 
<html> 
<head></head> 
<body> 
    <script type="text/javascript"> 
    // Basic RGB(A) to CSS property value 
    function _toString(obj) { 
     var type = 'rgb', out = obj.red + ', ' + obj.green + ', ' + obj.blue; 

     if (obj.alpha !== undefined) { 
      type += 'a'; 
      out += ', ' + obj.alpha; 
     } 

     return type + '(' + out + ')'; 
    } 

    // Background color, assume this is always RGB 
    var bg = {red: 255, green: 51, blue: 0}; 
    // RGBA color 
    var RGBA = {red: 0, green: 102, blue: 204, alpha: 0}; 
    // Output RGB 
    var RGB = {red: null, green: null, blue: null}; 
    // Just a cache... 
    var alpha; 

    while (RGBA.alpha < 1) { 
     alpha = 1 - RGBA.alpha; 
     RGB.red = Math.round((alpha * (RGBA.red/255) + ((1 - RGBA.alpha) * (bg.red/255))) * 255); 
     RGB.green = Math.round((alpha * (RGBA.green/255) + ((1 - RGBA.alpha) * (bg.green/255))) * 255); 
     RGB.blue = Math.round((alpha * (RGBA.blue/255) + ((1 - RGBA.alpha) * (bg.blue/255))) * 255); 

     document.write('<div style="display: block; width: 150px; height: 100px; background-color: ' + _toString(bg) + '">\ 
      <div style="color: #fff; width: 50px; height: 50px; background-color: ' + _toString(RGBA) + '"><small>RGBA<br>' + RGBA.alpha + '</small></div>\ 
      <div style="color: #fff; width: 50px; height: 50px; background-color: ' + _toString(RGB) + '"><small>RGB<br>' + RGBA.alpha + '</small></div>\ 
     </div>'); 

     // Increment alpha 
     RGBA.alpha += 0.25; 
    } 
    </script> 
</body> 
</html>

Ejecución de lo anterior, tanto en Chrome y Firefox resultados en RGBA- éxito> RGB cuando alfa es 0,5, cualquier desviación de distancia de 0,5 da como resultado una falta de coincidencia, muy sutil si el la desviación es muy pequeña (es decir, es posible notar el problema cuando alfa es 0.55).

He reescrito la lógica varias veces, ampliando completamente la lógica en sus partes más básicas pero no he tenido éxito.

Fuente

2012-07-23 seeSaw

Parece que está intentando usar el método común para mezclar, pero el ciclo incremental me está arrojando. Extraído de las preguntas frecuentes de OpenGL:

"El uso típico descrito arriba [para la mezcla] modifica el color entrante por su valor alfa asociado y modifica el color de destino por uno menos el valor alfa entrante. La suma de estos dos colores es entonces escrito de nuevo en el framebuffer ".

Así que en lugar de un bucle while, utilice:

alpha = 1 - RGBA.alpha; 
RGB.red = Math.round((RGBA.alpha * (RGBA.red/255) + (alpha * (bg.red/255))) * 255); 
RGB.green = Math.round((RGBA.alpha * (RGBA.green/255) + (alpha * (bg.green/255))) * 255); 
RGB.blue = Math.round((RGBA.alpha * (RGBA.blue/255) + (alpha * (bg.blue/255))) * 255);

Fuente

2012-07-23 14:59:20 AlcoJaguar

perfecto! Cambié la lógica a la suya (usando el alfa calculado en el fondo, no el primer plano), obtengo los valores correctos para los alfas variables determinados por el ciclo. ¡Bravo! – seeSaw

Convertir RGB RGBA a tomar en consideración fondo

Respuesta

Cuestiones relacionadas