使用javascript的画布图像的亮度和对比度答案

【问题标题】：Brightness and Contrast for a canvas image with javascript使用javascript的画布图像的亮度和对比度
【发布时间】：2011-04-23 18:20:25
【问题描述】：

我在标签中有一张图片

var img = new Image();
ctx.drawImage(img,0,0,img.width,img.height);
ecc...

如何使用 javascript 更改此图像的亮度和对比度？

Tnx

【问题讨论】：

-1：您至少可以说出您对哪种编程语言有疑问
添加了 javascript 标签。这样，javascript 专家检查问题的机会就更大了。

标签： javascript image canvas brightness contrast

【解决方案1】：

我知道至少有一个 javascript 库可以做到这一点，Pixastic

用法可能如下所示。

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

该库旨在处理页面中的图像，并将它们替换为包含渲染结果的画布元素。

但在上面的代码中，我传入了一个画布元素而不是图像，并包含了“leaveDOM”属性，以防止 pixastic 库将 DOM 中的画布替换为它创建的画布。

为了显示结果，我包含了回调函数，它只是执行 ctx.drawImage 将内容放入原始画布中。

希望这是有道理的。

您可以查看文档以获取更多示例。 Pixastic Documentation

【讨论】：

开头的 Pixastic 链接指向不同的页面。
感谢您的回答，我已经更新了 Pixastic 文档的链接。

【解决方案2】：

根据我的经验，fabric.js 是执行此操作的最佳 JavaScript 库。查看 Fabric JS 以及如何进行图像过滤：http://fabricjs.com/image-filters

【讨论】：

aff，死链接：\
更新了失效的链接

【解决方案3】：

你可以试试这个，看评论

<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>

【讨论】：

把这个放在最上面
你不能是认真的。

【解决方案4】：

你可以试试这个（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);

【讨论】：

@PizzaiolaGorgonzola 这个问题最初没有提到语言。