Brightness and Contrast for a canvas image with javascript

javascript image canvas brightness contrast

17,243

There's at least one javascript library I know of which can do this, Pixastic

Usage might look like this.

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

The library is kind of intended to work with images within your page and it replaces them with canvas elements which contain the rendered result.

But in the code above I've passed in a canvas element rather than an image and included the 'leaveDOM' property to prevent the pixastic library from swapping your canvas in the DOM for the one it creates.

To display the results I've included the callback function which just does ctx.drawImage to put the contents into your original canvas.

Hope that makes sense.

You can check the documentation for more examples. Pixastic Documentation

17,243

Author by

Claudio

Updated on June 05, 2022

Comments

Claudio about 2 years
I have an image in a tag
```
var img = new Image();
ctx.drawImage(img,0,0,img.width,img.height);
ecc...
```
How is possible to change the Brightness and Contrast of this image with javascript?

Tnx
Laxman about 10 years

put this on the top <html> <div> <img style="opacity:0.9;" src="your image location" onclick="clickMeEvent(this)"> </div>
xehpuk over 8 years

@PizzaiolaGorgonzola The question originally didn't mention the language.
Wallace Vizerra about 7 years

aff, dead link :\
Brandon Johnson about 7 years

Updated the broken link
mystrdat about 5 years

You can't be serious.
Franchy over 4 years

The Pixastic link at the beginning point to a different page.
Nicolae Olariu almost 3 years

Thank you for this answer, I've updated the links to Pixastic docs.