Contraste d'image HTML5 Canvas

J'ai écrit un programme de traitement d'image qui applique des effets au travers de HTML5 canvas pixel traitement. J'ai atteint le Seuil, Vintaging, et ColorGradient pixel manipulations, mais incroyablement, je ne peux pas changer le contraste de l'image!
J'ai essayé plusieurs solutions, mais j'ai toujours trop de luminosité dans l'image et à moins d'un effet de contraste et je n'ai pas l'intention d'utiliser toutes les bibliothèques Javascript depuis que je suis en train de réaliser ces effets en mode natif.

La base de la manipulation de pixels code:

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];
}

La manipulation de pixels exemple

Valeurs sont en mode RVB, ce qui signifie data[i] est la couleur Rouge. Donc, si des données[i] = data[i] * 2; la luminosité sera augmentée à deux fois pour le canal Rouge du pixel. Exemple:

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

*Note: je ne suis pas demander à vous les gars pour compléter le code! Que serait une faveur! Je demande un algorithme (même les Pseudo-code) qui montre comment le Contraste dans la manipulation de pixels, c'est possible!
Je serais heureux si quelqu'un peut fournir un bon algorithme pour le Contraste de l'Image en HTML5 canvas.

source d'informationauteur Schahriar SaffarShargh

Après avoir essayé la réponse par Schahriar SaffarShargh, ce n'était pas de se comporter comme de contraste doit se comporter. Je suis finalement tombé sur cet algorithme, et il fonctionne comme un charme!

Pour plus d'informations sur l'algorithme, lire cet article et c'est la section commentaires.

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

Utilisation:

var newImageData = contrastImage(imageData, 30);

J'espère que ce sera un gain de temps pour quelqu'un. Cheers!

3

J'ai découvert que vous avez à utiliser l'effet en séparant les ombres et les lumières ou techniquement tout ce qui est inférieur à 127 (moyenne de R+G+B /3) à l'échelle rvb est noir et plus de 127 est un blanc, donc par votre niveau de contraste moins une valeur, disons, 10 contraste les noirs et les ajouter à la même valeur pour les blancs!

Voici un exemple:
J'ai deux pixels avec les couleurs RVB, [105,40,200] | [255,200,150]
Donc, je sais que pour mon premier pixel 105 + 40 + 200 = 345, 345/3 = 115
et les 115 est inférieure à ma moitié de 255 127 donc, je considère le pixel le plus proche de [0,0,0] donc si je veux moins de 10 contraste puis-je tirer 10 de chaque couleur sur elle de la moyenne
Ainsi, j'ai de diviser chacune des couleurs de la valeur par le total de la moyenne qui était de 115 pour ce cas et à la fois par ma revanche et moins la valeur finale de cette couleur spécifique:

Pour l'exemple je vais prendre 105 (rouge) à partir de mon pixel, donc je le divise par le nombre total de RVB de l'avg. qui est de 115 et fois par ma valeur de contraste de 10, (105/115)*10, qui vous donne quelque chose de l'ordre de 9 (vous avez à la ronde!) et ensuite prendre que 9 à l'écart à partir de 105, de sorte que la couleur devient 96 donc, mon rouge après avoir eu un 10 en contraste sur un pixel sombre.

Donc, si je vais sur mon pixel des valeurs deviennent [96,37,183]! (note: l'échelle de contraste est à vous! mais mon à la fin, vous devez le convertir en quelques échelle comme de 1 à 255)

Pour les pixels plus clairs je fais aussi la même sauf qu'au lieu de soustraire la valeur de contraste-je ajouter! et si vous atteignez la limite de 255 ou 0 puis vous vous arrêtez votre addition et la soustraction de cette couleur! donc mon deuxième pixel qui est un briquet pixel devient [255,210,157]

Comme vous ajouter plus de contraste, il permettra d'alléger les couleurs les plus claires et assombrir les plus sombres et donc ajoute du contraste à votre image!

Voici un exemple de code Javascript ( je n'ai pas encore essayé ) :
```
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;
  }
}
```

Vous pouvez prendre un coup d'oeil à la OpenCV docs pour voir comment vous pourriez faire cela: La luminosité et du contraste.

Puis il y a la démo de code:

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

qui, j'imagine, vous êtes capable de traduire à javascript.

1

Par vintaging je suppose que votre en essayant de les appliquer LUT..Récemment, j'ai essayé d'ajouter des traitements de couleur sur une toile de windows. Si vous voulez à réellement s'appliquer "LUT" à la toile de fenêtre, je crois que vous avez besoin pour faire la carte de la matrice de données images renvoie au tableau RVB de la LUT.

(À partir de la Lumière de l'illusion)
Un exemple: le début d'une LUT 1D pourrait ressembler à quelque chose comme ceci:
Note: strictement parlant, c'est 3x 1D Lut, comme chaque couleur (R,G,B) est un 1D LUT
```
R, G, B 
3, 0, 0 
5, 2, 1 
7, 5, 3 
9, 9, 9
```
Ce qui signifie 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
```
Qui est bizarre LUT, mais vous voyez que pour une valeur donnée de R, G ou B d'entrée, il y a une valeur donnée de R, G et B de sortie.

Donc, si un pixel a une valeur d'entrée de 3, 1, 0 pour le RVB, le pixel de sortie serait de 9, 2, 0.

Au cours de cette je me suis rendu compte après avoir joué avec les données images qu'il renvoie une Uint8Array et que les valeurs indiquées dans ce tableau sont des décimaux. La plupart des TABLES de correspondance 3D sont en Hexadécimal. Donc, vous devez d'abord faire un peu de type de hex dec de conversion sur l'ensemble de la matrice avant tout cela, la cartographie.

Ce javascript mise en œuvre est conforme à la SVG/CSS3 définition de "contraste" (et suivants du code de rendre votre toile de l'image à l'identique):

/*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;
}

C'est la formule que vous cherchez ...

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

Espère que cela aide!

Vous devez vous connecter pour publier un commentaire.