Question

我在标签中有一个图像

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

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

Tnx公司

Answer 1

据我所知，至少有一个javascript库可以做到这一点，像素

用法可能是这样的。

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

该库在某种程度上是用来处理页面中的图像的，它将它们替换为包含渲染结果的画布元素。

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

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

希望这是有道理的。

您可以查看文档以了解更多示例像素文档

Answer 2

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

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

友情链接