JavaScript获取图片像素颜色并转换为box-shadow显示
一、原理：
1.使用HTML5的FileReader API读取图片
FileReader文件读物器，用于读取客户端文件到，注意，文件读取完毕后并不会载入缓存
eg：
var upfile = document.querySelector('#upfile');
var fileReader = new FileReader();
fileReader.onload = function(evt)
{
if(FileReader.DONE==fileReader.readyState)
{
var img = document.createElement('img');
img.src = this.result; //是Base64的data url数据
document.body.appendChild(img);
console.log(fileReader);
}
}
fileReader.readAsDataURL(upfile.files[0]);
2.使用HTML5 canvas 的 getImageData 获取图片像素信息
getImageData的直译即“获得图像数据”，他的作用是从canvas中提取像素出来。所以，他是有返回值的。
语法及返回值
ctx.getImageData(x,y,width,height);
这就是他的语法。而他的返回值是一个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">
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, 0, 0, img_width, img_height);
// 读取图片像素信息
var imageData = context.getImageData(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 = 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,g,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
}
}
</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>
相关推荐
-
JS实现颜色的10进制转化成rgba格式的方法
本文实例讲述了JS实现颜色的10进制转化成rgba格式的方法.分享给大家供大家参考,具体如下: 当我们在已知一个整数如(0~256x256x256x256 之间的颜色值),想获得关于它的3原色加一个透明度时,即alpha, red, green, blue,可采用如下方法: 方法一: function getColor(number) { let color = number; const blue = parseInt(color % 0x100, 10); color = color >>
-
js 翻转颜色实现代码
复制代码 代码如下: function reverseColor(rgbColor) {//205,15,20 // console.log(rgbColor); rgbColor = rgbColor.replace(/\s/g, ""); var arrRGB = new Array(3); if (rgbColor.indexOf("rgb") > -1) { var colorReg = /\s*\d+,\s*\d+,\s*\d+/i; var t =
-
RGB颜色值转HTML十六进制(HEX)代码的JS函数
复制代码 代码如下: //转到固定长度的十六进制字符串,不够则补0 function zero_fill_hex(num, digits) { var s = num.toString(16); while (s.length < digits) s = "0" + s; return s; } //妈的,怎么都没搜到怎么用javascript找出一个背景色的数值,只好自己解析 function rgb2hex(rgb) { //nnd, Firefox / IE not the
-
javascript实现十六进制颜色值（HEX）和RGB格式相互转换
在日常开发中,经常会用到不同格式的颜色域值之间的相互转换,以下给出一种解决方法. 复制代码 代码如下: //十六进制颜色值的正则表达式 var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; /*RGB颜色转换为16进制*/ String.prototype.colorHex = function(){ var that = this; if(/^(rgb|RGB)/.test(that)){ var aColor = th
-
JavaScript实现把rgb颜色转换成16进制颜色的方法
本文实例讲述了JavaScript实现把rgb颜色转换成16进制颜色的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm
-
JS实现随机颜色的3种方法与颜色格式的转化
前言 相信大家都知道在前端的颜色表示方式有多种,一种是以3个或6个十六进制的数子表示,一种是RGB的数字形式,还有一种是直接以颜色的英文来表示.这三种都是不支持透明色的.所以还有RGBA的表式方式,在RGB的的基础上加入了Alpha透明,使网页可以展现更加复杂绚丽的效果. 随机颜色 在平时的码农日常中,经常会用到求随机颜色的地方,下面是我总结的几种简单的实现随机颜色的方式: 十六进制格式(#000000-#FFFFFF) 第一种是比较简单的方法,这种方法是先随机生成ffffff以内16进制数,然
-
Javascript实现Web颜色值转换
最近一直忙碌于完成业务需求,好长时间没有写博客了.今天稍微有些时间,翻看了一下最近项目中的一些前端代码,看到Web颜色转换功能的时候,突然想到当我们在做一些颜色设置/编辑的需求时,经常会涉及到各种颜色值格式的互换.于是我决定记录一下我在做这一部分功能的时候是如何实现的,写下来和大家分享一下,希望读者们各抒己见,多多交流. 先看看问题 问题一,当我们在进行网页前端开发的时候,经常会使用 dom.style.backgroundColor = "#f00" 来设置某个 DOM 元素的背景颜
-
js实现九宫格的随机颜色跳转
效果如下: 图(1) 初始图 图(2) 开始闪 代码如下: <!DOCTYPE html> <html> <head> <title>九宫格</title> <style type="text/css"> div{ width:190px; height:190px; background:#FFA600; float:left; margin:10px; border-radius: 10px; } body
-
用js实现的十进制的颜色值转换成十六进制的代码
function MyColor(name,r,g,b){ this.name=name; this.red=r; this.green=g; this.blue=b; } MyColor.prototype.hexValue=function(){ var hR=this.red.toString(16); var hG=this.green.toString(16); var hB=this.blue.toString(16); return "#"+(this.red [Ctrl
-
javascript实现rgb颜色转换成16进制格式
自己试过很好用 function zero_fill_hex(num, digits) { var s = num.toString(16); while (s.length < digits) s = "0" + s; return s; } function rgb2hex(rgb) { if (rgb.charAt(0) == '#') return rgb; var ds = rgb.split(/\D+/); var decimal = Number(ds[1]) *
-
Javascript实现颜色rgb与16进制转换的方法
本文实例讲述了Javascript实现颜色rgb与16进制转换的方法.分享给大家供大家参考.具体如下: 使用方法: Color(12,34,56); Color("#fff") Color("#defdcd") 实现代码: //颜色转换 var Color = function() { if (!(this instanceof Color)) { var color = new Color(); color._init.apply(color, arguments