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 davon weiß, dass dies tun können, Pixastic

Usage 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 sollte die Arbeit mit Bildern innerhalb Ihrer Seite und ersetzt sie mit Canvas-Elementen, die das gerenderte Ergebnis enthalten.

Aber in dem obigen Code ich in einem Canvas-Elemente bestanden habe und nicht ein Bild, und enthalten die "leaveDOM Eigentum die pixastic Bibliothek zu verhindern, dass Ihre Leinwand in dem DOM für einen Austausch schafft.

Um die Ergebnisse anzuzeigen Ich habe die Callback-Funktion enthalten, die ctx.drawImage nur tut, um den Inhalt in Ihre ursprüngliche Leinwand zu setzen.

Ich hoffe, das macht Sinn.

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

Answer 2

Nach meiner Erfahrung fabric.js ist die beste JavaScript-Bibliothek für diese durchgeführt wird. Schauen Sie sich Fabric JS und wie zu tun Bildfilterung an: http://fabricjs.com/image-filters

Answer 3

Sie können dies versuchen, siehe Kommentar

<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

Sie können 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);