当前位置:首页 » 人物图片 » js获得图片颜色
扩展阅读
美女健身跳河视频 2023-08-31 22:08:21
西方贵族美女照片真人 2023-08-31 22:08:15

js获得图片颜色

发布时间: 2023-05-12 09:36:15

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]);