js实现图片转换为CSS3 box-shadow代码
代码语言:html
所属分类:其他
代码描述:js实现图片转换为CSS3 box-shadow代码,可读取图片的像素值转换成 box-shadow代码,这个 box-shadow代码可显示图片。
代码标签: js 图片 转换 CSS 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 ;
}
// .........完整代码请登录后点击上方下载按钮下载查看
网友评论0