shadow显示_javascript技巧_脚本之家

一、原理:1.施用HTML5的FileReader
API读取图片
FileReader文件读物器,用于读取客商端文件到,注意,文件读取完结后并不会载入缓存eg:

var upfile = document.querySelector;var fileReader = new FileReader();fileReader.onload = function{ if(FileReader.DONE==fileReader.readyState) { var img = document.createElement; img.src = this.result; //是Base64的data url数据 document.body.appendChild; console.log; }}fileReader.readAsDataURL;

2.运用HTML5 canvas 的 getImageData
获取图片像素消息
getImageData的直译即“获得图像数据”,他的功力是从canvas中提取像素出来。所以,他是有再次回到值的。

ctx.getImageData;

那便是他的语法。而她的重临值是多个ImageData对象:

ImageData { width=10, height=10, data=Uint8ClampedArray}

本条ImageData对象饱含:width,height,以致二个像素音信数组data。

本条像素音信数组是重大。他总结red,green,blue,和阿尔法,且各个都是0-255的数值——连
阿尔法 也是。

那一个data数组的尺寸由像素个数调整,即ImageData的width*height.如getImageData,那data就独有一个像素消息;而getImageData,则有10*10=100个。

3.将像素消息调换为CSS3 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; var context = canvas.getContext; var showimg = document.getElementById; var shadow = showimg.getElementsByTagName[0]; var css_code = document.getElementById; document.getElementById.onchange = function(){ var img = event.target.files[0]; // 检查能否读取图片 if{ return ; } // 检查图片类型 if(!(img.type.indexOf==0 && img.type && /.$/.test{ alert; return ; } // 检查图片尺寸 if{ alert; return ; } // file reader var reader = new FileReader(); reader.readAsDataURL; reader.onload = function{ // 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{ // 每四个元素为一个像素数据 r,g,b,alpha var x = i/4%img_width + 1; // 横坐标 var y = Math.floor + 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 值 var rgba = imageData.data[i] + ',' + imageData.data[i+1] + ',' + imageData.data[i+2] + ',' + alpha; arrbox.push(x + 'px ' + y + 'px 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 = r.toString; g = g.toString; b = b.toString; // 补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==g.slice==b.slice{ hex = r.slice + b.slice; } return hex; } } // image onload end } // reader onload end } }    获取图片像素颜色,转换为CSS3 box-shadow 请选择图片     

发表评论

电子邮件地址不会被公开。 必填项已用*标注