Helligkeit und Kontrast für eine Leinwand Bild mit Javascript

Question

Ich habe ein Bild in einem Tag

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

Wie ist möglich, die Helligkeit und den Kontrast des Bildes mit Javascript zu ändern?

Tnx

Answer 1

Es gibt mindestens eine Javascript-Bibliothek, die ich kenne, was dies tun können, Pixastic

Verbrauch könnte wie folgt aussehen.

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

Die Bibliothek ist eine Art soll mit Bildern innerhalb Ihrer Seite arbeiten und es ersetzt sie mit Canvas-Elemente, die das gerenderte Ergebnis enthalten.

Aber im obigen Code habe ich ein canvas-Element anstelle eines Bildes übergeben und die 'leaveDOM' -Eigenschaft eingefügt, um zu verhindern, dass die pixastic-Bibliothek die Zeichenfläche im DOM für die erzeugte ersetzt.

Um die Ergebnisse anzuzeigen, habe ich die Callback-Funktion eingefügt, die nur ctx.drawImage verwendet, um den Inhalt in Ihre ursprüngliche Zeichenfläche zu bringen.

Hoffnung, die Sinn macht.

Sie können die Dokumentation für weitere Beispiele überprüfen. Pixastic Documentation

Answer 2

können Sie versuchen, diese (C# -Code):

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

Sie dies versuchen können,

<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

Nach meiner Erfahrung Kommentar sehen ist, fabric.js die beste JavaScript-Bibliothek dies für die Durchführung. Check out Fabric JS und wie man Bildfilterung bei: http://fabricjs.com/image-filters