2010-10-20 6 views
2

J'ai utilisé ce code pour essayer exactement d'avoir le code RGB de la couleur:problème en couleurs et en toile Javascript

var huePixel = HueCanvas.css('background-color').match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);//["rgb(0, 70, 255", "0", "70", "255"] 
var svPixel = SVCanvas.get(0).getContext("2d").getImageData(satPos,valPos,1,1).data; 
//opacity*original + (1-opacity)*background = resulting pixel 
var opacity =(svPixel[3]/255); 
var r =parseInt((opacity*svPixel[0])+((1-opacity)*huePixel[1])); 
var g =parseInt((opacity*svPixel[1])+((1-opacity)*huePixel[2])); 
var b =parseInt((opacity*svPixel[2])+((1-opacity)*huePixel[3])); 

Le problème est que dans certains pixels, le RGB est pas exactement la même chose. Si j'utilise Math.round parseInt il y a plus de problèmes, et plus de pixels ont peu de changements que les vrais.

Je sais que le problème est dans var opacity =(svPixel[3]/255);, mais je ne sais pas comment mettre l'équation pour ne pas avoir ces problèmes.

Merci de votre attention.

+0

Quelle est la valeur de svPixel avant de définir l'opacité? – EMMERICH

+0

svPixel [3] va de 0 à 255. –

+0

Est-ce que vous changez juste un pixel ou avez-vous l'intention de mélanger le contenu de la toile entière avec l'arrière-plan? Si vous définissez des pixels de canevas avec une opacité <255, ils se fondent déjà avec les éléments sous-jacents et l'arrière-plan, sans effort supplémentaire. – andrewmu

Répondre

1

Je ne connais pas la réponse définitive à votre question (je ne suis même pas sûr de comprendre la question en elle-même), mais je vais essayer.

Il semble que vous essayez de calculer la valeur RVB que vous voyez lorsque quelque chose d'autre (le navigateur?) Fusionne une toile non-opaque sur un fond opaque. (Êtes-vous sûr que c'est la bonne chose à faire?)

D'abord, n'utilisez pas parseInt pour arrondir un nombre. Il est utilisé to parse strings et vous devriez l'utiliser pour convertir huePixel [i] en un entier: parseInt(huePixel[i], 10) (notez que je spécifie la base explicitement pour éviter que les nombres soient analysés en octal).

Pour les valeurs rondes, vous devez utiliser Math méthodes: Math.round (à entier le plus proche), Math.ceil (arrondi au supérieur) ou Math.floor (arrondir vers le bas). Le problème que vous rencontrez est peut-être causé par des erreurs d'arrondi (difficile à dire sans les entrées spécifiques et les sorties attendues du calcul). Pour minimiser les erreurs d'arrondi, vous pouvez essayer de réécrire la formule comme ceci:

(opacity * svPixel[0]) + ((1-opacity) * huePixel[1]) = 
    huePixel[1] + opacity * (svPixel[0]-huePixel[1]) = 
    huePixel[1] + svPixel[3] * (svPixel[0]-huePixel[1])/255