當前位置:首頁 » 人物圖片 » 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]);