html5 颜色转换api,JavaScript获取图片像素颜色并转换为box-shadow显示

获取图片像素颜色,转换为css3 Box-shadow

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;

}

window.onload = function(){

var canvas = document.createElement('canvas');

var context = canvas.getContext('2d');

var showimg = document.getElementById('showimg');

var shadow = showimg.getElementsByTagName('span')[0];

var css_code = document.getElementById('css_code');

document.getElementById('img').onchange = function(){

var img = event.target.files[0];

// 检查能否读取图片

if(!img){

return ;

}

// 检查图片类型

if(!(img.type.indexOf('image')==0 && img.type && /\.(?: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();

reader.readAsDataURL(img);

reader.onload = function(e){ // reader onload start

var image = new Image();

image.src = e.target.result;

image.onload = function(){ // image onload start

var img_width = this.width;

var img_height = this.height;

// 设置画布尺寸

canvas.width = img_width;

canvas.height = img_height;

// 将图片按像素写入画布

context.drawImage(this,img_width,img_height);

// 读取图片像素信息

var imageData = context.getImageData(0,img_height);

var arrBox = [],length = imageData.data.length;

// 生成Box-shadow

for(var i=0; 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 = Math.round(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,b){

r = r.toString(16);

g = g.toString(16);

b = b.toString(16);

// 补0

r.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

}

}

获取图片像素颜色,转换为CSS3 Box-shadow

图片(小于120K)