html5和js如何改变图片的亮度

JavaScript07

html5和js如何改变图片的亮度,第1张

首先,您说的亮度应该是图片透明度。

图片透明度调整很简单,只要在图片的属性中加上{filter:alpha(opacity=50)-moz-opacity:0.5-khtml-opacity: 0.5opacity: 0.5};

opacity是最重要的,因为它是CSS透明的标准属性,取值范围在0-1之间,目前支持的浏览器有:

Firefox、Chrome、Opera、Safari。(也就是说,除了IE,它支持所有主流浏览器);

filter:alpha(opacity=50)是专门给IE设定的属性,取值的范围在0-100之间;

-moz-opacity是为了兼容一些老版本的Mozilla浏览器,取值范围在0-1之间;

-khtml-opacity是为了兼容一些老版本的Safari浏览器,取值范围在0-1之间。

function opacity_change(m)

{

var oDiv=document.getElementById("imgInfo")

switch(m)

{

case 0 :

//照片变透明

oDiv.filters.alpha.opacity=oDiv.filters.alpha.opacity-10

break

case 1 :

//照片变亮

oDiv.filters.alpha.opacity=oDiv.filters.alpha.opacity+10

break

default: break

}

}

</script>

这个是亮度

问题比较复杂,分步来讲:

因为你这张图,很显然是使用HSB颜色,固定H,S和B的取值范围都是0%~100%,所有可能的集合就是你的这张图,所以,首先要把rgb颜色转换成hsb颜色。

把得到的hsb颜色的h值固定,然后使用一个循环,把hsb(h,0%,0%)~hsb(h,100%,100%)都写入一个数组里,这里要注意hsb(h,12%,80%)和hsb(h,80%,12%)是不同的.

再把hsb颜色转换成rgb颜色,然后输出。

好了,思路有了,接下来难点在于rgb与hsb的颜色转换。

二者的转换复杂程度非同一般,所以,如果真的需要,HI我,给你一篇文章地址。这里打不出网址来。