JavaScript获取图⽚像素颜⾊并转换为box-shadow显⽰
⼀、原理：
1.使⽤HTML5的FileReader API读取图⽚
FileReader⽂件读物器，⽤于读取客户端⽂件到，注意，⽂件读取完毕后并不会载⼊缓存
eg：
var upfile = document.querySelector('#upfile');
var fileReader = new FileReader();
{
if(FileReader.DONE==adyState)
{
var img = ateElement('img');
img.src = sult; //是Base64的data url数据
document.body.appendChild(img);
console.log(fileReader);
}
}
2.使⽤HTML5 canvas 的 getImageData 获取图⽚像素信息
getImageData的直译即“获得图像数据”，他的作⽤是从canvas中提取像素出来。所以，他是有返回值的。
语法及返回值
这就是他的语法。⽽他的返回值是⼀个ImageData对象：
ImageData { width=10, height=10, data=Uint8ClampedArray}
这个ImageData对象包括：width,height，以及⼀个像素信息数组data。
这个像素信息数组是重中之重。他包括red,green,blue，和alpha，且每个都是0-255的数值——连 alpha 也是。
这个data数组的⼤⼩由像素个数决定，即ImageData的width*height.如getImageData(1,1,1,1)，那data就只有⼀个像素信息；⽽getImageData(1,1,10,10)，则有10*10=100个。
3.将像素信息转换为CSS3 box-shadow的值
⼆、实现效果：
三、实例代码：
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<meta charset="utf-8">
<title>获取图⽚像素颜⾊，转换为css3 box-shadow</title>
<style type="text/css">
body{margin: 0px; background:#f2f2f0;}
p{margin:0px;}
.title{color:#FFFF00; background:#000000; text-align:center; font-size:24px; line-height:50px; font-weight:bold;}
.file{position:absolute; width:100%; font-size:90px;}
.filebtn{display:block; position:relative; height:110px; color:#FFFFFF; background:#06980e; font-size:48px; line-height:110px; text-align:center; cursor:pointer; border: 3px solid #cccccc;}
.filebtn:hover{background:#04bc0d;}
.showimg{margin:10px auto 10px auto; -webkit-transition: all .3s; transition: all .3s;}
.showimg span{width:1px; height:1px; display:block; margin: -1px 0px 0px -1px;}
.css_code{margin:10px; padding:10px; display:none; border:1px solid #FFCC00; font-size:12px; background:#F1F1F1; white-space:pre-wrap; word-wrap:break-word; height:300px; overflow:auto;}  .css_code:hover{
background:#DEFEDE;
}
</style>
<script type="text/javascript">
var canvas = ateElement('canvas');
var context = Context('2d');
var showimg = ElementById('showimg');
var shadow = ElementsByTagName('span')[0];
var css_code = ElementById('css_code');
var img = event.target.files[0];
// 检查能否读取图⽚
if(!img){
return ;
}
// 检查图⽚类型
if(!(pe.indexOf('image')==0 && pe && /\.(?:jpg|png|gif)$/.test(img.name)) ){
alert('图⽚只能是jpg,gif,png');
return ;
}
// 检查图⽚尺⼨
if(img.size > 120*1024){
alert('图⽚不能⼤于120K');
return ;
}
// file reader
var reader = new FileReader();
var image = new Image();
image.src = sult;
var img_width = this.width;
var img_height = this.height;
// 设置画布尺⼨
canvas.width = img_width;
canvas.height = img_height;
// 将图⽚按像素写⼊画布
context.drawImage(this, 0, 0, img_width, img_height);
// 读取图⽚像素信息
var imageData = ImageData(0, 0, img_width, img_height);
var arrbox = [],
length = imageData.data.length;
// ⽣成box-shadow
for(var i=0; i<length; i++){
if(i%4 === 0){ // 每四个元素为⼀个像素数据 r,g,b,alpha
var x = i/4%img_width + 1;                // 横坐标
var y = Math.floor(i/4/img_width) + 1;          // 纵坐标
var alpha = und(imageData.data[i+3]/255*100)/100; // alpha 值
if(imageData.data[i+3]==255){ // 没有alpha 值
var hex = gethex(imageData.data[i], imageData.data[i+1], imageData.data[i+2]);
arrbox.push(x + 'px ' + y + 'px #' + hex);
}else if(alpha>0){ // 有alpha 值
var rgba = imageData.data[i] + ',' + imageData.data[i+1] + ',' + imageData.data[i+2] + ',' + alpha;              arrbox.push(x + 'px ' + y + 'px rgba(' + rgba + ')');
}
}
}
// 将数据写⼊dom
showimg.style.width = img_width + 'px';
showimg.style.height = img_height + 'px';
shadow.style.boxShadow = arrbox.join(',');
// 输出CSS3 box-shadow
css_code.style.display = 'block';
css_code.innerHTML = 'box-shadow: ' + arrbox.join(',');
// 获取16进制颜⾊
function gethex(r,g,b){
r = r.toString(16);
g = g.toString(16);
b = b.toString(16);
// 补0
borderboxr.length==1? r = '0' + r : '';
g.length==1? g = '0' + g : '';
b.length==1? b = '0' + b : '';
var hex = r + g + b;
// 简化处理，如 FFEEDD 可以写为 FED
if(r.slice(0,1)==r.slice(1,1) && g.slice(0,1)==g.slice(1,1) && b.slice(0,1)==b.slice(1,1)){
hex = r.slice(0,1) + g.slice(0,1) + b.slice(0,1);
}
return hex;
}
} // image onload end
} // reader onload end
}
}
</script>
</head>
<body>
<p class="title">获取图⽚像素颜⾊，转换为CSS3 box-shadow</p>
<p><input type="file" class="file" id="img"><label class="filebtn" for="img" title="JPG,GIF,PNG">请选择图⽚(⼩于120K)</label></p>  <p class="showimg" id="showimg"><span></span></p>
<p class="css_code" id="css_code"></p>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。