使用javascript绘制画布图像的亮度和对比度

Question

我在标签中有一个图像

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

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

TNX

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'属性,以防止像素库在DOM中为你创建的画布交换画布.

为了显示结果,我已经包含了回调函数,该函数只是将ctx.drawImage放入原始画布中.

希望有道理.

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