使用 javascript 的画布图像的亮度和对比度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3905572/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Brightness and Contrast for a canvas image with javascript
提问by Claudio
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?
如何使用 javascript 更改此图像的亮度和对比度？
Tnx
田纳西州
采纳答案by Kyle Jones
There's at least one javascript library I know of which can do this, Pixastic
我知道至少有一个 javascript 库可以做到这一点，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.
但是在上面的代码中，我传入了一个画布元素而不是图像，并包含了 'leaveDOM' 属性，以防止 pixastic 库将 DOM 中的画布替换为它创建的画布。
To display the results I've included the callback function which just does ctx.drawImage to put the contents into your original canvas.
为了显示结果，我包含了回调函数，它只是执行 ctx.drawImage 将内容放入原始画布中。
Hope that makes sense.
希望这是有道理的。
You can check the documentation for more examples. Pixastic Documentation
您可以查看文档以获取更多示例。Pixastic 文档
回答by Brandon Johnson
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
根据我的经验，fabric.js 是执行此操作的最佳 javascript 库。查看 Fabric JS 以及如何进行图像过滤，请访问：http: //fabricjs.com/image-filters
回答by Lax
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>
回答by Jeff Norman
You can try this (c# code):
你可以试试这个（c#代码）：
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);
