javascript - 使用 javascript 的 Canvas 图像的亮度和对比度

Question

我在标签中有一张图片

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

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

谢谢

Answer 1

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

用法可能如下所示。

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

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

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

为了显示结果，我添加了回调函数，它只是执行 ctx.drawImage 以将内容放入原始 Canvas 中。

希望这是有道理的。

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