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
Brightness and Contrast for a canvas image with javascript
Asked Answered
-1: You at least could tell which programming language is your question about –
Wesleywesleyan
Added the javascript tag. This way, there are more chances that javascript experts check the question. –
Wesleywesleyan
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
The Pixastic link at the beginning point to a different page. –
Revelry
Thank you for this answer, I've updated the links to Pixastic docs. –
Therefrom
Despite mentioning "Use Legacy" in the Pixastic docs, their non-legacy mode doesn't seem to actually implement Photoshop's modern (internally curves-based) adjustment layer. –
Britney
In my experience, fabric.js is the best javascript library for performing this. Check out Fabric JS and how to do image filtering at: http://fabricjs.com/image-filters
aff, dead link :\ –
Vicenta
Updated the broken link –
Ida
You can try this (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);
@PizzaiolaGorgonzola The question originally didn't mention the language. –
Digestif
@Digestif the question originally did have the js code
var img = new Image(); and utilises "canvascontext -> drawimage" which isn't a thing in c#. I think Jeff could've asked to improve the question in a comment if they were really confused by the lack of tag –
Lots you can try this , see comment
<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>
put this on the top <html> <div> <img style="opacity:0.9;" src="your image location" onclick="clickMeEvent(this)"> </div> –
Varien
You can't be serious. –
Heimlich
© 2022 - 2024 — McMap. All rights reserved.