JS将获取到的RGB转换为HSL

//RGB 颜色值转换为 HSL

    //转换公式参考自 >    }

参考改写的，希望对你有用。

div 里面background设置属性

background:url('地址') 0 0 no-repeat ；

background-size:100% 100%;

就可以了

上面background 的 0 0 是 x y 轴的偏移量 no-repeat是如果背景不重复出现

//用是Jquery可以直接求出宽高

<div><img src="images/ajpg" /></div>

<script src="js/jquery-172minjs"></script>

<script type="text/javascript">

$(function(){

alert($('img')css('width'));

})

</script>

//原生js只有在定义了宽高之后才能求出

<div><img src="images/ajpg" style="width:300px; height:330px;" /></div>

<script type="text/javascript">

var oImg = documentgetElementsByTagName('img')[0];

alert(oImgstylewidth + '-' + oImgstyleheight);

</script>

必须浏览器要支持Canvas才可以。

html中需要有一个canvas

<canvas id="canvas">对不你，你的浏览器不支持Canvas</canvas>

js代码：

var ctxt = canvasgetContext('2d');

var img = new Image;

imgonload = function(){

    ctxtdrawImage(img, 0, 0);

    var data = ctxtgetImageData(0, 0, imgwidth, imgheight)data;//读取整张的像素。

    consolelog(data, datatoString());

}

imgsrc = 'img/picjpg';//src也可以是从文件选择控件中取得。

然后获取像素的某点颜色值。

var data = ctxtgetImageData(0, 0, 480, 480)data;

for(var i =0,len = datalength; i<len;i+=4){

    var red = data[i],//红色色深

    green = data[i+1],//绿色色深

    blue = data[i+2],//蓝色色深

    alpha = data[i+3];//透明度

    //因此RGB颜色就是(red, green, blue, alpha)

}

上面所说的imgsrc 是通过一个相对路径比如“img/picjpg"指定的，但是如果你的相片不是在网络上，而是想用户自己在本机上选择的怎么办？其实也是可以的。

比如你有一个<input id="" type="file" />的上传控件selector，用户选择好文件以后。

你就可以取得这个selectorfiles这个对象列表了。

假定我们已经取得了这个files列表，并且files中只有一个合法的文件。代码如下：

var reader = new FileReader(); 

// 绑定load事件自动回调函数 

readeronload = function(e){ 

    var src = etargetresult;

    //然后我们imagesrc就可以指向这个src了。

    imagesrc = src;

    //然后进行上面的各种处理。

}; 

// 读取文件内容 

readerreadAsDataURL(files[0]);

javascript获取元素的高度：

var obj = documentgetElementById("test");

alert(objheight + "\n" + objwidth);

// 200px 200px typeof=string只是将style属性中的值显示出来

扩展：

获取元素的实际大小

clientWidth和clientHeight

这组属性可以获取元素可视区的大小，可以得到元素内容及内边距所占据的空间大小。返回了元素大小，但没有单位，默认单位是px，如果你强行设置了单位，比如100em之类，它还是会返回px的大小。(CSS获取的话，是照着你设置的样式获取)。对于元素的实际大小，clientWidth和clientHeight理解方式如下：

a 增加边框，无变化；

b 增加外边距，无变化；

c 增加滚动条，最终值等于原本大小减去滚动条的大小；

d 增加内边距，最终值等于原本大小加上内边距的大小；

<script type="text/javascript">

//jquery获取ID为abc的元素的宽度

alert($("#abc")width());

//js获取ID为abc的元素的宽度

alert(parseInt(documentgetElementById('abc')stylewidth));

</script>

js通过html对象的style属性获取元素属性

获取到的值是包含单位（px像素）的

将获取到的值转化成整数就可去掉单位

parseInt() 函数可解析一个字符串，并返回一个整数

语法

parseInt(string, radix)

参数 描述

string 必需。要被解析的字符串。

radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。

                  如果省略该参数或其值为 0，则数字将以 10 为基础来解析。

                  如果它以“0x” 或 “0X” 开头，将以 16 为基数。

                  如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。

返回值

返回解析后的数字。

以上就是关于JS将获取到的RGB转换为HSL全部的内容，包括:JS将获取到的RGB转换为HSL、如何用js自动获取图片的背景颜色，急急急...、html如何获得一张.png格式的图片像素值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！