Formule pour le réglage de luminosité/contraste sur la Toile?

Comme il y a une formule pour convertir une image en niveaux de gris, est-il une formule pour augmenter la luminosité d'une image et en diminuant dans le même niveau? J'ai essayé d'ajouter une valeur à chacun des r, g et b de pixels. Elle augmente la luminosité, mais lorsque je réduis la même valeur, je n'ai pas ma valeur d'origine de retour.

var pixels = context.getImageData(...);

//loop over the pixel data and add a value
p[i] = p[i]+100;
p[i+1] = p[i+1]+100;
p[i+2] = p[i+2]+100;

Ce éclaircit l'image. Mais quand j'réduire de 100 à partir de chaque pixel, je ne reçois pas mon image d'origine en arrière.

J'ai lu sur le web qu'il y a certaines formules pour calculer correctement. Quelqu'un peut-il expliquer? Et de même pour le contraste et le gamma?

Mise à JOUR:

Merci à tous pour les suggestions. J'ai essayé cette après passant par des postes ci-dessous.

Pour augmenter la luminosité de l':

var pixels = context.getImageData(...);

//loop over the pixel data and add a value
p[i] = p[i]+100 < 255 ? p[i]+100 : 255;
p[i+1] = p[i+1]+100 < 255 ? p[i+1]+100 : 255;
p[i+2] = p[i+2]+100 < 255 ? p[i+2]+100 : 255;

Et pour la réduction de la luminosité:

var pixels = context.getImageData(...);

//loop over the pixel data and add a value
p[i] = p[i]-100 >= 0 ? p[i]-100 : 0;
p[i+1] = p[i+1]-100 >= 0 ? p[i+1]-100 : 0;
p[i+2] = p[i+2]+100 >= 0 ? p[i+2]-100 : 0;

Je peux voir l'incrément fonctionne bien, mais quand je décrémente, je ne comprends toujours pas l'image d'origine, il y a peu de différence entre l'original et égayé image!

Ce que je fais mal?

Auriez-vous l'esprit de partage de la finale de la formule que vous avez utilisée?

OriginalL'auteur Rutwick Gangurde | 2012-12-18

  1. 5

    Une recherche rapide sur google, a révélé:

    ajuster l'image bitmap de la luminosité/le contraste à l'aide de c++

    Liens:

    http://www.kweii.com/site/color_theory/2007_LV/BrightnessCalculation.pdf

    http://www.bobpowell.net/image_contrast.htm

    n'oubliez pas de regarder pour les mêmes questions avant de poster :).

    EDIT:

    Deux plus de liens:

    Algorithmes De Traitement D'Image De La Partie 5: Réglage Du Contraste:

    http://thecryptmag.com/Online/56/imgproc_5.html

    Algorithmes De Traitement D'Image De La Partie 4: Réglage De La Luminosité:

    http://www.dfstudios.co.uk/articles/image-processing-algorithms-part-4/

    EDIT:

    Vous avez une erreur dans le deuxième bloc de code que vous avez posté:

    var pixels = context.getImageData(...);

//loop over the pixel data and add a value
p[i] = p[i]-100 >= 0 ? p[i]-100 : 0;
p[i+1] = p[i+1]-100 >= 0 ? p[i+1]-100 : 0;
p[i+2] = p[i+2]+100 >= 0 ? p[i+2]-100 : 0; //<- Tha p[i+2]+100 should be a p[i+2]-100 right?

    Ce Johannes Jendersie dit est vrai, votre problème est le suivant:

    De peur de dire que vous avez un pixel avec ces valeurs

    R = 100;
G = 210;
B = 20;

    Et vous ajoutez 100 pour chaque couleur, vous avez maintenant:

    R = 200;
G = 255; //It was 310 but you have to clamp it to 255.
B = 120;

    Maintenant vous soustraire ces mêmes 100:

    R = 100; //same
G = 155; //different!, this have to be 210!!
B = 20;  //same

    C'est pourquoi cette opération n'est pas réversible. Ce que vous pouvez faire est de toujours avoir une copie de l'image d'origine, et à chaque fois que vous modifiez la valeur, vous ré-appliquant la correction de la luminosité.

    De sorte que le moyen d'annuler votre opération d'ajout d'100 n'est pas en soustrayant de 100, mais le réglage de la luminosité de correction de valeur à 0. C'est de cette façon beaucoup de retouche d'image programme fonctionne, vous avez un curseur et alors que vous êtes au curseur de la fenêtre de modification de la valeur, vous pouvez toujours obtenir votre image d'origine si vous le réglez à 0, mais une fois que vous "appliquer" la correction, il ne peut pas être annulée, lorsque vous ouvrez le curseur de la fenêtre de la valeur "0" est maintenant l'image déjà filtré.

    Donc soit vous conservez une sauvegarde de l'image et un brightnesCorrection valeur quelque part, et à chaque fois la valeur modifiée, vous re-appliquer la correction sur l'image, ou vous avez juste à accepter le fait que vous ne serez pas en mesure de restaurer l'image de son ancienne gloire xD (du moins pas avec ce genre de correction de la luminosité, vous ne savez pas si il ya une meilleure façon).

    Espère que cela aide.

    Merci! Va vérifier ces! J'ai lu un peu partout mais n'a pas vraiment vérifier ces un est depuis que je suis à la recherche d'une formule générale!
    Le papier sur la luminosité générale, n'est pas lié à une langue, l'autre un code C#. J'ai ajouté 2 liens pour la réponse avec une approche plus générale tho.
    Vérifier mon édité réponse 🙂
    Ahh la faute de frappe! Oui, j'ai réalisé l'erreur. Je suis à la recherche dans le moyen de le faire à l'aide d'une 2ème image de sauvegarde.
    Enfin je l'ai résolu en utilisant le redessiner toile approche! Merci pour votre aide l'homme! 😀

    OriginalL'auteur AngelCastillo

  2. 5

    De nombreuses opérations sur les images ne sont pas inversible en raison du fait de l'arrondi et de serrage de valeurs.

    Chacun de vos canaux de couleur p[i] est probablement de type byte? Si donc il est seulement possible de stocker des valeurs entre 0 et 255. Si vous ajoutez à 100, par exemple, 223 vous vous retrouvez à 323, ce qui ne peut pas être enregistré dans le 1 octet. Il devrait en résulter un dépassement de capacité à 67 ou il est fixé à 255 (le plus grand nombre possible).
    En soustrayant de 100 de ne pas récupérer l'223, mais le résultat en 155.

    Au lieu d'ajouter un offset, vous devriez essayer de multiplier vos couleurs. Mais qui est couvert par la réponse de AngelCastillo. (Là, vous aurez la perte de l'information, mais les résultats sont plus agréable)

    Réaction à la mise à Jour:

    Ce que je voulais dire, que le serrage des valeurs (par exemple, votre réelle de mise en œuvre) entraîne une perte de données. Comme la expliqué exemple ci-dessus, la valeur qui est trop grand devient 255. Donc en soustrayant de 100 à nouveau de définir toutes les couleurs, 155, 155 ou plus dans l'original. Les informations de couleurs vives (>155) est perdu.

    Dans d'autres cas (le contraste et le gamma modifications), vous aurez également la perte d'informations en raison de l'arrondi des ensembles précédents différentes couleurs de la même valeur.

    Le seul moyen d'éviter cela est de l'utilisation d'autres formats avec plus d'informations par canal. E. g. >16 bits signé entier ou à virgule flottante. Je doute que votre toile a une option pour le faire, alors vous avez besoin pour organiser votre propre arrière-plan copie (avec une valeur plus élevée de la gamme). Faire toutes les transformations sur votre copie et de montrer l'image serrée sur la toile.

    Merci! J'ai essayé d'ajouter et de réduction de la limite supérieure de 255 et une limite inférieure de 0. Veuillez vérifier mes mises à jour question!
    Pourriez-vous me suggérer un moyen de le faire en utilisant signé entier ou à virgule flottante?
    Désolé, je suis pas familier avec le langage HTML5. Mais je suppose que vous allez obtenir l'exécution de la solution avec la 2ème image de sauvegarde 🙂
    Hey @Johannes Jendersie, je l'ai eu à travailler avec une sauvegarde/redessiner toile truc! Merci pour votre aide mon pote! 🙂

    OriginalL'auteur Johannes Jendersie