js实现图片转换为CSS3 box-shadow代码-html代码-BFW代码库

js实现图片转换为CSS3 box-shadow代码

代码语言：html

所属分类：其他

代码描述：js实现图片转换为CSS3 box-shadow代码，可读取图片的像素值转换成 box-shadow代码，这个 box-shadow代码可显示图片。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">

  
  <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_w.........完整代码请登录后点击上方下载按钮下载查看