<!DOCTYPE html>
<html lang="en">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-QT401FZZ2K"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-QT401FZZ2K');
</script>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<link rel="stylesheet" type="text/css" href="head/bootstrap.css">
<link href="head/cropper.min.css" rel="stylesheet">
<link href="head/sitelogo.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/font-awesome.4.6.0.css">
<link rel="stylesheet" href="../css/layer.css">
<script src="head/bootstrap.js"></script>
<script src="head/cropper.js"></script>
<script src="head/sitelogo.js"></script>
<script src="../lib/fsize.js"></script>
<style type="text/css">
.avatar-btns button {
height: 35px;
}
.modal-dialog{
margin: 0;
padding: 0;
}
.modal-dialog{
width: 10rem;
height: 12rem;
}
.col-md-9{
position: absolute;
height: 7rem;
width: 7rem;
top: 0rem;
}
.avatar-wrapper{
height: 7rem;
width: 6.5rem;
}
.modal-content{
height: 12rem;
position: relative;
}
.avatar-btns button{
height: 0.8rem;
}
.modal-body{
padding: 0.2rem;
}
.col-face-box{
position: absolute;
right: 0;
}
.preview-lg{
width: 2rem !important;
height: 2rem !important;
position: absolute;
right: 0.2rem;
border: 0.05rem solid #f3f3f3;
}
.modal-title{
font-size: 0.4rem;
height: 0.8rem;
line-height: 0.8rem;
}
.modal-header{
padding: 0.2rem;
}
.avatar-body{
padding: 0;
}
.avatar-upload{
height: 1rem;
line-height: 1rem !important;
}
.avatar-upload label{
font-size: 0.35rem;
width: 3.5rem;
line-height: 1rem !important;
}
.btn-danger{
width: 3rem;
height: 0.8rem !important;
font-size: 0.35rem;
}
.col-md-5{
width: 50%;
display: none;
top: 0;
}
.face-btn{
position: absolute;
width: 3rem;
top: 7.3rem;
}
.row{
position: relative;
}
.close{
font-size: 0.8rem;
}
#avatar-name{
font-size: 0.3rem;
line-height: 0.5rem;
position: relative;
top: 0.1rem;
}
</style>
</head>
<body style="" class="modal-open">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#avatar-modal" style="margin: 10px;">
修改头像
</button>
<div class="user_pic" style="margin: 10px;">
<img src="">
</div>
<div class="modal fade in" id="avatar-modal" aria-hidden="false" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1" style="display: block;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!--<form class="avatar-form" action="upload-logo.php" enctype="multipart/form-data" method="post">-->
<form class="avatar-form">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
</div>
<div class="modal-body">
<div class="avatar-body">
<div class="avatar-upload">
<input class="avatar-src" name="avatar_src" type="hidden">
<input class="avatar-data" name="avatar_data" type="hidden">
<label for="avatarInput" style="line-height: 35px;">图片上传</label>
<button class="btn btn-danger" type="button" style="height: 35px;" onclick="$('input[id=avatarInput]').click();">请选择图片</button>
<span id="avatar-name"></span>
<input class="avatar-input hide" id="avatarInput" name="avatar_file" type="file"></div>
<div class="row">
<div class="col-md-9">
<div class="avatar-wrapper"></div>
</div>
<div class="col-md-3 col-face-box">
<div class="avatar-preview preview-lg" id="imageHead"></div>
<!--<div class="avatar-preview preview-md"></div>
<div class="avatar-preview preview-sm"></div>-->
</div>
</div>
<div class="row avatar-btns">
<!-- <div class="col-md-4">
<div class="btn-group">
<button class="btn btn-danger fa fa-undo" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees"> 向左旋转</button>
</div>
<div class="btn-group">
<button class="btn btn-danger fa fa-repeat" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees"> 向右旋转</button>
</div>
</div> -->
<div class="col-md-5" style="text-align: right;">
<button class="btn btn-danger fa fa-arrows" data-method="setDragMode" data-option="move" type="button" title="移动">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper("setDragMode", "move")">
</span>
</button>
<button type="button" class="btn btn-danger fa fa-search-plus" data-method="zoom" data-option="0.1" title="放大图片">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper("zoom", 0.1)">
<!--<span class="fa fa-search-plus"></span>-->
</span>
</button>
<button type="button" class="btn btn-danger fa fa-search-minus" data-method="zoom" data-option="-0.1" title="缩小图片">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper("zoom", -0.1)">
<!--<span class="fa fa-search-minus"></span>-->
</span>
</button>
<button type="button" class="btn btn-danger fa fa-refresh" data-method="reset" title="重置图片">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper("reset")" aria-describedby="tooltip866214">
</span></button>
</div>
<div class="col-md-3 face-btn">
<button class="btn btn-danger btn-block avatar-save fa fa-save" type="button" data-dismiss="modal"> 保存修改</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="../layer-v3.1.0/layer/layer.js"></script>
<div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
<script src="head/html2canvas.min.js?v=20220630" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//做个下简易的验证 大小 格式
var lastTouchEnd = 0 //更新手指弹起的时间
document.documentElement.addEventListener("touchstart", function (event) {
//多根手指同时按下屏幕，禁止默认行为
if (event.touches.length > 1) {
event.preventDefault();
}
});
document.documentElement.addEventListener("touchend", function (event) {
var now = (new Date()).getTime();
if (now - lastTouchEnd <= 300) {
//当两次手指弹起的时间小于300毫秒，认为双击屏幕行为
event.preventDefault();
}else{ // 否则重新手指弹起的时间
lastTouchEnd = now;
}
}, false);
//阻止双指放大页面
document.documentElement.addEventListener("gesturestart", function (event) {
event.preventDefault();
});
$(".close").unbind("click").on("click",function(){
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
})
$('#avatarInput').on('change', function(e) {
var filemaxsize = 1024 * 5;//5M
var target = $(e.target);
var Size = target[0].files[0].size / 1024;
if(Size > filemaxsize) {
alert('圖片過大，請重新上傳!');
$(".avatar-wrapper").childre().remove;
return false;
}
if(!this.files[0].type.match(/image.*/)) {
alert('請選擇正確的圖片!')
} else {
var filename = document.querySelector("#avatar-name");
var texts = document.querySelector("#avatarInput").value;
var teststr = texts; //你这里的路径写错了
testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的
filename.innerHTML = testend;
}
});
$(".avatar-save").on("click", function() {
if($("#avatar-name").text()==''){
layer.msg("请选择您的图片")
return;
}
var img_lg = document.getElementById('imageHead');
// 截图小的显示框内的内容
html2canvas(img_lg, {
allowTaint: true,
taintTest: false,
onrendered: function(canvas) {
canvas.id = "mycanvas";
//生成base64图片数据
var dataUrl = canvas.toDataURL("image/jpeg");
var newImg = document.createElement("img");
newImg.src = dataUrl;
localStorage.face=dataUrl
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
// imagesAjax(dataUrl)
}
});
})
function imagesAjax(src) {
var data = {};
data.img = src;
data.jid = $('#jid').val();
$.ajax({
url: "upload-logo.php",
data: data,
type: "POST",
dataType: 'json',
success: function(re) {
if(re.status == '1') {
$('.user_pic img').attr('src',src );
}
}
});
}
</script>
<div class="modal-backdrop fade in"></div></body>
</html>