一、原理:
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 { width=10, height=10, data=Uint8ClampedArray}
这个像素信息数组是重中之重。他包括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 && /\.("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>
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月27日
2024年09月27日
- 纯音入心系列纯音乐《中央民族乐团-古筝传奇》1CD[MP3][253.1MB]
- 江玲.1989-这样你才爱我,是吗?【新作有声】【WAV+CUE】
- 郭美美.2010-我是郭美美【华纳】【WAV+CUE】
- 黄心懋1991-轻忧郁【滚石】【WAV+CUE】
- 群星.2000-大地金曲世纪回顾2CD【大地】【WAV+CUE】
- 王菲.1996-浮躁(2024环球MQA-UHQCD限量版)【环球】【WAV+CUE】
- 群星.2022-传家电视剧原声带【东阳欢娱】【FLAC分轨】
- 《摇滚教父 伍佰黄金精选 2CD》 [WAV+CUE][1GB]
- 《凤凰传奇 我从草原来》[WAV/分轨][400MB]
- 《叶倩文 真心真意过一生》[WAV+CUE][400MB]
- 潘越云.1985-世间女子(滚石25周年经典复刻版)【滚石】【WAV+CUE】
- 陈柏宇.2009-CANT.BE.HALF【SONY】【WAV+CUE】
- 李明依.1989-小女生【滚石】【WAV+CUE】
- 《李荣浩 新时代创作新人王》[WAV分轨][310MB]
- 《黑鸭子与马头琴 史上最动听草原音乐》[WAV+CUE][320MB]