themes/pc/user/user_head.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html>
<html>
	{include file="head.html"}
	<style>
	.userhead{
		text-align: center;
	}
	#head{
		max-height: 300px;
		max-width: 100%;
		margin-bottom: 5px;
	}
 	.main-body{
 		padding: 10px;
 	}
	#image{max-width: 100%; max-height: 300px; display: none;}
	.rtools{
		text-align: center;
	}
	.cropper-container{
		margin-bottom: 10px;
	}    
</style>
	<body>
		{include file="header.html"}
		<div class="main-body">
			<div class="flex">
				{include file="user_left.html"}
				<div class="flex-1">
			<div id="page">
				<div class="mgb-10 flex-center" id="userhead">
					<img id="head" src="{$data.user_head}.100x100.jpg" class="wh-100">
				</div>
		
			<img id="image"  />
			<div class="flex flex-center">
				<button class="btn  mgr-10" id="js-up">上传头像</button>
			<button class="btn btn-success" id="js-save">保存头像</button>
			</div>

			<input style="display: none;" type="file" id="file" />
		</div>
		</div>
		</div>
		{include file="footer.html"}
		<script src="/plugin/cropper/cropper.min.js"></script>
		<link href="/plugin/cropper/cropper.min.css" rel="stylesheet">
		<script>
			$(function(){
				$(document).on("click","#head",function(){
					$("#file").click();
				})
				$(document).on("click","#js-up",function(){
					$("#file").click();
				})
			
			$(document).on("click","#js-save",function(){
				console.log("js-save");
			 	var dataURL = $img.cropper("getCroppedCanvas");
			 	var imgurl = dataURL.toDataURL("image/jpeg", 0.3);