Converti RGBA a RGB prendendo in considerazione sfondo

Eventuali duplicati:
Convert RGBA color to RGB Converti RGBA a RGB prendendo in considerazione sfondo

Sto cercando di convertire un colore RGBA, con un alpha < 1 in una rappresentazione RGB solida presa in considerazione il colore di sfondo.

Utilizzando l'algoritmo fornito a this question, riesco a ottenere la conversione corretta in un colore RGB solido, MA SOLO quando alpha = 0.5.

Ecco il mio codice di prova:

<!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>

esecuzione quanto sopra sia in Chrome e Firefox risultati in RGBA- successo> RGB quando alfa è 0,5, qualsiasi deviazione da 0,5 risultati in una mancata corrispondenza, molto sottile se il la deviazione è molto piccola (ovvero è possibile notare il problema quando alpha è 0,55).

Ho riscritto la logica diverse volte, espandendo completamente la logica nelle sue parti più elementari ma non ho avuto successo.

fonte

2012-07-23 seeSaw

Sembra che tu stia cercando di utilizzare il metodo comune per la miscelazione, ma il ciclo incrementale mi sta espellendo. Estratto dalle domande frequenti su OpenGL:

"L'uso tipico descritto in precedenza [per la fusione] modifica il colore in entrata in base al valore alfa associato e modifica il colore di destinazione di uno meno il valore alfa in ingresso. La somma di questi due colori è quindi riscritto nel framebuffer. "

Così, invece di un ciclo while, uso:

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);

fonte

2012-07-23 14:59:20 AlcoJaguar

Perfetto! Modificata la logica da sola (utilizzando l'alfa calcolato sullo sfondo non in primo piano), ottengo i valori corretti per gli alfa variabili determinati dal ciclo! Bravo! – seeSaw

Converti RGBA a RGB prendendo in considerazione sfondo

risposta

Problemi correlati