使用 JavaScript 调整画布图像的亮度和对比度

发布于 2024-09-27 02:43:43 字数 167 浏览 5 评论 0原文

我的标签中有一个图像

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

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

总氮

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

长伴 2024-10-04 02:43:43

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

用法可能看起来像这。

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

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

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

为了显示结果，我添加了回调函数，该函数仅执行 ctx.drawImage 将内容放入原始画布中。

希望这是有道理的。

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

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

回复收藏 0 原文

梦回旧景 2024-10-04 02:43:43

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

回复收藏 0 原文

送你一个梦 2024-10-04 02:43:43

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

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

回复收藏 0 原文

夏天碎花小短裙 2024-10-04 02:43:43

你可以试试这个，看评论

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

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>

回复收藏 0 原文

~没有更多了~