获取图片像素颜色,转换为CSS3 box-shadow显示

原理：

1.使用FileReader 读取图片

2.使用canvas 的 getImageData 获取图片像素信息

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 readervar reader = new FileReader();reader.readAsDataURL(img);reader.onload = function(e){ // reader onload startvar image = new Image();image.src = e.target.result;image.onload = function(){ // image onload startvar 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-shadowfor(var i=0; i<length; i++){if(i%4 === 0){ // 每四个元素为一个像素数据 r,g,b,alphavar 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 + ')');}}}// 将数据写入domshowimg.style.width = img_width + 'px';showimg.style.height = img_height + 'px';shadow.style.boxShadow = arrbox.join(',');// 输出CSS3 box-shadowcss_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);// 补0r.length==1? r = '0' + r : '';g.length==1? g = '0' + g : '';b.length==1? b = '0' + b : '';var hex = r + g + b;// 简化处理,如 FFEEDD 可以写为 FEDif(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>

转载于:https://www.cnblogs.com/fdipzone/p/3715073.html

获取图片像素颜色,转换为CSS3 box-shadow显示相关推荐

js获取图片像素颜色，修改图片像素颜色
直接上代码示例 <!DOCTYPE HTML PUBLIC> <html><head><meta charset="utf-8">& ...
python获取图片像素点颜色_Python获取图片位置像素色值及判断色值是否存在
本文背景: 公司项目的广告系统有个功能,给图片模板打指定的颜色值点,根据需要拼合的图片数量,打点数量也不同.设计说他弄好了,运营上传打点后的模板图片时,获取不到打点的位置坐标.于是找研发看是怎么回事, ...
Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
python获取图片的颜色信息
python获取图片的颜色更多 0 getcolors 图片颜色 python image = Image.open("outofmemory.cn.png") image.get ...
python查看图片颜色统计_Python通过PIL获取图片主要颜色并和颜色库进行对比的方法...
本文实例讲述了Python通过PIL获取图片主要颜色并和颜色库进行对比的方法.分享给大家供大家参考.具体分析如下: 这段代码主要用来从图片提取其主要颜色,类似Goolge和Baidu的图片搜索时可以指 ...
android中获取图片、获取图片像素、处理像素等基础知识
一.android获取图片的主要方法. (1).利用BitmapFactory.decode..各种方式获取资源.sd卡的图片,从这可以看出android都是以位图的形式加载的图片的,jpg.png等 ...
opencv获取图片像素坐标_利用OpenCV从图片中提取矩形并标注坐标（室内平面地图）（一）
某城市会展中心室内地图背景一名室内设计师的日常工作从设计一张会展地图开始.常常有这样的场景:划分除规范的展位后,进入销售阶段,频繁的需要修改这张地图,如展示拆分.合并.换位置.标记已交易. 问题 ...
使用js修改图片像素颜色并保存
个人随笔 (Owed by: 春夜喜雨 http://blog.csdn.net/chunyexiyu) 需求有时候,我们通常会有修改图片底色,或者让底色透明,也或者颜色交换的类似的需求,特别是我们 ...
CSS3 Box Shadow
语法: box-shadow:1px 2px 3px #FFF; box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: 兼容性 Firefox支持 ...

获取图片像素颜色,转换为CSS3 box-shadow显示

获取图片像素颜色,转换为CSS3 box-shadow显示相关推荐

最新文章

热门文章