luminosità e contrasto per un'immagine di tela con javascript

Question

Ho un'immagine in un tag

var img = new Image(); 
ctx.drawImage(img,0,0,img.width,img.height); 
ecc... 

Come è possibile modificare la luminosità e il contrasto di questa immagine con javascript?

Tnx

Answer 1

C'è almeno una libreria javascript che conosco che può fare questo, Pixastic

uso potrebbe essere simile a questo.

Pixastic.process(canvas, 'brightness', 
    { 
     'brightness': 60, 
     'contrast': 0.5, 
     'leaveDOM': true 
    }, 
    function(img) { 
     ctx.drawImage(img, 0, 0); 
    } 
); 

La biblioteca è una specie di destinato a lavorare con le immagini all'interno della vostra pagina e li sostituisce con gli elementi di tela che contengono il risultato reso.

Ma nel codice sopra ho passato un elemento canvas anziché un'immagine e ho incluso la proprietà 'leaveDOM' per impedire alla libreria pixastic di scambiare il tuo canvas nel DOM per quello che crea.

Per visualizzare i risultati ho incluso la funzione di callback che fa semplicemente ctx.drawImage per mettere il contenuto nella tela originale.

Spero che abbia senso.

È possibile controllare la documentazione per altri esempi. Pixastic Documentation

Answer 2

Si può provare questo (codice C#):

Bitmap originalImage; 
Bitmap adjustedImage; 
double brightness = 1.0f; // no change in brightness 
double constrast = 2.0f; // twice the contrast 
double gamma = 1.0f; // no change in gamma 

float adjustedBrightness = brightness - 1.0f; 
float[][] ptsArray ={ 
       new float[] {contrast, 0, 0, 0, 0}, // scale red 
       new float[] {0, contrast, 0, 0, 0}, // scale green 
       new float[] {0, 0, contrast, 0, 0}, // scale blue 
       new float[] {0, 0, 0, 1.0f, 0}, // don't scale alpha 
       new float[] {adjustedBrightness, adjustedBrightness, adjustedBrightness, 0, 1}}; 

imageAttributes = new ImageAttributes(); 
imageAttributes.ClearColorMatrix(); 
imageAttributes.SetColorMatrix(new ColorMatrix(ptsArray), ColorMatrixFlag.Default, ColorAdjustType.Bitmap); 
imageAttributes.SetGamma(gamma, ColorAdjustType.Bitmap); 
Graphics g = Graphics.FromImage(adjustedImage); 
g.DrawImage(originalImage, new Rectangle(0,0,adjustedImage.Width,adjustedImage.Height) 
      ,0,0,bitImage.Width,bitImage.Height, 
GraphicsUnit.Pixel, imageAttributes); 

Answer 3

si può provare questo, si veda il commento

<script type="application/javascript"> 

function clickMeEvent(obj) 
{ 
if (obj.style.opacity=="0.9") 
    { 
    obj.style.opacity="0.7"; 
    } 
else if (obj.style.opacity=="0.7") 
    { 
    obj.style.opacity="0.5";   
    } 
else if (obj.style.opacity=="0.5") 
    { 
    obj.style.opacity="0.3";   
    } 
else if (obj.style.opacity=="0.3") 
    { 
    obj.style.opacity="0.1";   
    } 
else 
    { 
    obj.style.opacity="0.0"; 

    } 
} 

</script> 

Answer 4

Nella mia esperienza, fabric.js è la migliore libreria javascript per l'esecuzione di questo. Scopri Fabric JS e come fare il filtraggio delle immagini a: http://fabricjs.com/image-filters