先贴张图片,看看效果
贴代码之前,先说一下坑吧。
场景:点击button,隐藏的触发,选择需要上传的文件,但是在Safari下面,无法完成。
解决方案:之前input是display:none,为达到同样目的且不影响使用,设置为opacity:0;问题就解决了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
上传头像
</title>
<link href="css/re-boot.css" rel="stylesheet" type="text/css"/>
<link href="css/clear.css" rel="stylesheet" type="text/css"/>
<link href="css/uploadTx.css" rel="stylesheet" type="text/css">
<script src="js/jquery1.10.js">
</script>
<script src="layer/layui.js">
</script>
<script src="js/html2canvas.js" type="text/javascript">
</script>
</link>
</meta>
</head>
<body>
<div id="uploadTx">
<div class="uploadBox">
<div class="screenshot">
<div class="uploadImg">
<button class="uploadBtn" type="button" for="postFile">
选择图片
</button>
<input id="postFile" type="file"/>
<div class="shadeDiv">
</div>
</div>
</div>
<div class="btnList">
<button class="seeTx">预览</button>
<button class="subtractSize" type="button">
-
</button>
<button class="addSize" type="button">
+
</button>
<button class="reUpload" type="button">
重新上传
</button>
</div>
<p>
(请保证上传图片大小在2M以内)
</p>
</div>
<div class="disTx">
<p>
预览
</p>
<img class="bigTx" src="images/photo-100.png">
<p>
100px * 100px
</p>
<img class="mediumTx" src="images/photo-86.png">
<p>
86px * 86px
</p>
<img class="smallTx" src="images/photo-60.png">
<p>
60px * 60px
</p>
<button type="button">
保存头像
</button>
</img>
</img>
</img>
</div>
</div>
<button class="tc" type="button">
上传图片弹窗
</button>
<script>
// 弹窗
layui.use('layer', function(){
var layer = layui.layer;
// 上传图片
$('.tc').click(function(){
layer.open({
type: 1,
title:['请选择图片','font-size:20px;color:#fff;'],
area:['700px','550px'],
content: $('#uploadTx') //这里content是一个普通的String
});
});
var w,h;
var flag=false;
// 上传图片按钮
$('.uploadBtn').click(function(){
$('#postFile').click();
flag=true;
});
// 重新上传
$('.reUpload').click(function(){
$('#postFile').click();
});
// 截取头像方法
function screenshot() {
html2canvas($('.screenshot'), {
allowTaint: true,
taintTest: false,
onrendered: function(canvas) {
canvas.id = "mycanvas";
var dataUrl = canvas.toDataURL();
$('.bigTx').attr('src',dataUrl);
$('.mediumTx').attr('src',dataUrl);
$('.smallTx').attr('src',dataUrl);
}
});
}
// input内容改变
$('#postFile').change(function() {
// 初始化图像大小
$('.uploadImg').css('background-size','auto');
var val = this.value;
var upLoadType = '.jpg,.gif,.bmp,.png';//['.jpg','.gif','.bmp','.png']; //可上传的格式
var fileExt = val.substr(val.lastIndexOf(".")).toLowerCase(); //从字符串中抽出最后一次出现.之后的字符,并且转换成小写
var result = upLoadType.indexOf(fileExt); //查找后缀名是否符合条件,如果符合返回>=0,如果不符合则返回负数;
var oFReader = new FileReader();
if (this.files.length === 0) { return; }
var oFile = this.files[0]; //如果只有一个文件则只需要访问这个FileList对象中的第一个元素.
if (result < 0) {
layer.msg('您上传的格式有误!');
return;
} else{
$('.uploadBtn').hide();
$('.shadeDiv').show();
$('.btnList').show();
};
oFReader.readAsDataURL(oFile); // 开始在后台进行读取操作。当图像文件的所有内容加载后,他们转换成一个data:URL,传递到onload回调函数中
oFReader.onload = function (oFREvent) {
//当读取操作成功完成时调用.
var image=new Image();
image.src=oFREvent.target.result;
image.onload=function(){
w=image.width;
h=image.height;
}
$('.uploadImg').css('background-image','url('+oFREvent.target.result+')');
};
screenshot();
});
// 鼠标滚动改变图片大小
// $('.uploadImg').on("mousewheel DOMMouseScroll", function(e) {
// if(flag){
// var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
// (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox
// $(document).off("mousewheel DOMMouseScroll");
// if (delta > 0) {
// // 向上滚
// $('.addSize').click();
// } else if (delta < 0) {
// // 向下滚
// $('.subtractSize').click();
// }
// }
// });
// 点击按钮调节图片大小
// 变大
$('.addSize').click(function(){
w*=1.1;
h*=1.1;
$('.uploadImg').css('background-size',w+'px '+h+'px');
screenshot();
});
// 变小
$('.subtractSize').click(function(){
w*=0.9;
h*=0.9;
$('.uploadImg').css('background-size',w+'px '+h+'px');
screenshot();
});
//预览
$('.seeTx').click(screenshot);
// // 拖动
// var mx,my,//鼠标初始坐标
// ex,ey,//鼠标最终坐标
// px,py;//原有的position坐标
// $('.uploadImg').mousedown(function(e){
// // 图片显示后有效
// if(flag){
// var offset=$(this).offset();
// mx=e.pageX-offset.left;
// my=e.pagey-offset.top;
// }
// });
// $('.uploadImg').mousemove(function(e){
// // 图片显示后有效
// if(flag){
// var offset=$(this).offset();
// ex=e.pageX-offset.left;
// ey=e.pagey-offset.top;
// $('.uploadImg').css('background-size',x+'px '+y+'px');
// }
// });
// $('.uploadImg').mouseup(function(e){
// // 图片显示后有效
// if(flag){
// var offset=$(this).offset();
// ex=e.pageX-offset.left;
// ey=e.pagey-offset.top;
// $('.uploadImg').css('background-size',x+'px '+y+'px');
// }
// });
});
</script>
</body>
</html>
样式贴这(scss文件)
@charset'utf-8';
.layui-layer-title {
background-color: #06cc9b!important;
}
#uploadTx {
width: 700px;
height: auto;
padding: 40px 40px 23px 40px;
overflow: hidden;
display: none;
position: relative;
}
.uploadBox {
float: left;
p {
font-size: 16px;
line-height: 20px;
text-align: center;
margin-top: 20px;
color: #fdad00;
}
}
.disTx {
margin-left: 80px;
float: left;
p {
font-size: 14px;
line-height: 16px;
color: #888;
margin-top: 5px;
margin-bottom: 10px;
text-align: center;
}
img {
display: block;
margin: 0 auto;
border-radius: 50%;
}
.bigTx {
width: 100px;
height: 100px;
}
.mediumTx {
width: 86px;
height: 86px;
}
.smallTx {
width: 60px;
height: 60px;
}
button {
width: 120px;
height: 40px;
font-size: 18px;
color: #fff;
line-height: 40px;
margin: 10px auto;
background-color: #06cc9b;
cursor: pointer;
outline: 0;
}
}
.uploadImg {
width: 350px;
height: 350px;
background-color: #f2f2f2;
text-align: center;
vertical-align: middle;
position: absolute;
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
margin: -75px;
cursor: move;
input {
opacity: 0;
display: block;
}
button {
width: 100px;
height: 30px;
background-color: #fff;
background-image: url('../images/photo-add.png');
background-repeat: no-repeat;
background-position: 3px 8px;
display: inline-block;
font-size: 16px;
line-height: 30px;
padding-left: 20px;
color: #000;
border: 0;
outline: 0;
margin-top: 160px;
cursor: pointer;
z-index: 99;
}
.shadeDiv {
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -124px;
margin-left: -100px;
position: relative;
border-radius:50%;
box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
display: none;
}
}
.btnList {
height: auto;
overflow: hidden;
margin-top: 80px;
display: none;
button {
min-width: 30px;
font-size: 18px;
color: #fff;
line-height: 20px;
margin-right: 10px;
padding: 5px;
background-color: #fdad00;
border: 0;
outline: 0;
cursor: pointer;
display: inline-block;
float: right;
}
}
.screenshot{
width:200px;
height: 200px;
border-radius: 50%;
position: relative;
margin:75px ;
}