1. 如何用js自动获取图片的背景颜色,急急急...
div 里面background设置属性
background:url('图片地址') 0 0 no-repeat ;
background-size:100% 100%;
就可以了
上面background 的 0 0 是 x y 轴的偏移量 no-repeat是如果背景图片不重复出现
2. 如何js php 识别一张图片的主要8种颜色并输出每个颜色的代码#222222
在机器视觉系统中,对RGB和YUV两种不同颜色空间进行研究,应用相差法进行颜色识别,并对向量表中的结果进行优化。想要输出色彩需要专业技术分析识别,江苏视图专业的图片处理技术可以完成,可以详细了解。
3. asp或者js如何获取在线图片的主题色
我的思路是从图片缩放到一个比较小的范围,然后均匀的抽样取各点的色值,然后取平均数或者取最接近的颜色。
我用js做过
4. 如何从js中获取元素的颜色并改变
1、这个函数来自Rico,Longbill及Dnew.cn修改。
2、说明: 传入参数一个,为元素的id值或元素本身,返回为元素的真实背景色值(字符串)。背景值均为16进制的值(原代码是是IE里面返回的是16进制的值,而Mozilla则是rgb值,Dnew.cn将其修改为均返回16进制的值)。
3、代码如下:
<html>
<head>
<title>得到元素真实的背景颜色</title>
<style>
.classname{background-color:#ff99dd;}
#div3{background-color:#d8bfd8;}
div{background-color:#87cefa;border:1pxsolid#333333;margin:10px;padding:4px;}
body{background-color:#bed742;}
#div4{background-color:transparent;}
</style>
</head>
<body>
<spanstyle="text-align:center;font-size:20px;color:#ff7f50;width:100%;">得到元素真实的背景颜色<fontstyle="font-size:12px;">By<ahref=
<divid='div1'>div1直接通过div标签定义背景色(#87cefa)</div>
<divid='div2'class=classname>div2通过classname定义背景色(#ff99dd)</div>
<divid='div3'>div3通过id定义背景色(#d8bfd8)</div>
<divid='div4'>div4这是一个透明的div,背景色应为上一个元素的颜色(#bed742)</div>
<buttononclick="go()">getBg()</button>
<script>
functiongetBg(element)
{//author:Longbill(
)
//dnew.cn修补
varrgbToHex=function(rgbarray,array){
if(rgbarray.length<3)returnfalse;
if(rgbarray.length==4&&rgbarray[3]==0&&!array)return'transparent';
varhex=[];
for(vari=0;i<3;i++){
varbit=(rgbarray[i]-0).toString(16);
hex.push((bit.length==1)?'0'+bit:bit);
}
returnarray?hex:'#'+hex.join('');
}
//---------------
if(typeofelement=="string")element=document.getElementById(element);
if(!element)return;
cssProperty="backgroundColor";
mozillaEquivalentCSS="background-color";
if(element.currentStyle)
varactualColor=element.currentStyle[cssProperty];
else
{
varcs=document.defaultView.getComputedStyle(element,null);
varactualColor=cs.getPropertyValue(mozillaEquivalentCSS).match(/d{1,3}/g);
//-----
actualColor=(actualColor)?rgbToHex(actualColor):"transparent";
}
if(actualColor=="transparent"&&element.parentNode)
returnarguments.callee(element.parentNode);
if(actualColor==null)
return"#ffffff";
else
returnactualColor;
}
functiongo()
{
for(vari=1;i<=4;i++)eval("alert('div"+i+":'+getBg('div"+i+"'));");
}
</script>
</body>
</html>
5. js 如何获取背景色的值
javascript的style属性只能获取内联样式,对于外部样式和嵌入式样式需要用currentStyle属性。但是,currentStyle在FIrefox和Chrome下不支持,需要使用如下兼容性代码
HTMLElement.prototype.__defineGetter__("currentStyle",function(){
returnthis.ownerDocument.defaultView.getComputedStyle(this,null);
});
接下来就可以直接使用currentStyle属性来获取元素的样式了,下面实例演示获取页面body的背景色:
1、HTML结构
<inputtype='button'value='点击按钮获取页面背景色'onclick="fun()"/>
2、CSS样式
body{background:RGB(222,222,2);}
3、javascript代码
HTMLElement.prototype.__defineGetter__("currentStyle",function(){
returnthis.ownerDocument.defaultView.getComputedStyle(this,null);
});
functionfun(){
varcolor=document.body.currentStyle.backgroundColor;
alert(color);
}
4、效果演示
6. javascript加载图片查看具体某一点RGB值
必须浏览器要支持Canvas才可以。
html中需要有一个canvas
<canvasid="canvas">对不你,你的浏览器不支持Canvas</canvas>
js代码:
varctxt=canvas.getContext('2d');
varimg=newImage;
img.onload=function(){
ctxt.drawImage(img,0,0);
vardata=ctxt.getImageData(0,0,img.width,img.height).data;//读取整张图片的像素。
console.log(data,data.toString());
}
img.src='img/pic.jpg';//src也可以是从文件选择控件中取得。
然后获取像素的某点颜色值。
vardata=ctxt.getImageData(0,0,480,480).data;
for(vari=0,len=data.length;i<len;i+=4){
varred=data[i],//红色色深
green=data[i+1],//绿色色深
blue=data[i+2],//蓝色色深
alpha=data[i+3];//透明度
//因此RGB颜色就是(red,green,blue,alpha)
}
上面所说的img.src 是通过一个相对路径比如“img/pic.jpg"指定的,但是如果你的相片不是在网络上,而是想用户自己在本机上选择的怎么办?其实也是可以的。
比如你有一个<input id="" type="file" />的上传控件selector,用户选择好文件以后。
你就可以取得这个selector.files这个对象列表了。
假定我们已经取得了这个files列表,并且files中只有一个合法的图片文件。代码如下:
varreader=newFileReader();
//绑定load事件自动回调函数
reader.onload=function(e){
varsrc=e.target.result;
//然后我们image.src就可以指向这个src了。
image.src=src;
//然后进行上面的各种处理。
};
//读取文件内容
reader.readAsDataURL(files[0]);