Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
28
rated 0 times [  34] [ 6]  / answers: 1 / hits: 18137  / 14 Years ago, mon, october 11, 2010, 12:00:00

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


More From » image

 Answers
3

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


[#95361] Thursday, October 7, 2010, 14 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
kaleyv

Total Points: 259
Total Questions: 99
Total Answers: 107

Location: Saint Helena
Member since Tue, Nov 3, 2020
4 Years ago
;