120 lines
5.0 KiB
HTML
120 lines
5.0 KiB
HTML
<link rel="stylesheet" href="/assets/ywxapp/modules/cropper/cropper.css">
|
|
<style>
|
|
.readyimg { background: #f7f7f7; height: 420px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
|
|
.readyimg img { max-width: 100%; max-height: 100%; display: block; }
|
|
.img-preview { width: 150px; height: 150px; overflow: hidden; border-radius: 50%; border: 1px solid #eee; background: #f7f7f7; }
|
|
.img-preview img { width: 100%; }
|
|
</style>
|
|
|
|
<div class="uc-wrap">
|
|
<div class="layui-card">
|
|
<div class="layui-card-body">
|
|
<div class="layui-form-item">
|
|
<button type="button" class="layui-btn layui-btn-primary" id="pickBtn">
|
|
<i class="layui-icon"></i> 选择图片
|
|
</button>
|
|
<input id="avatarImgUpload" type="file" accept="image/*" name="file" style="display:none">
|
|
<div class="layui-form-mid layui-word-aux">支持 jpg / png / gif，建议尺寸 150x150 以上，大小 4M 以内</div>
|
|
</div>
|
|
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-md9">
|
|
<div class="readyimg"><img id="cropImage" src=""></div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-form-mid">预览：</div>
|
|
<div class="img-preview" style="margin-top:8px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-row layui-col-space15" style="margin-top:14px;">
|
|
<div class="layui-col-md9">
|
|
<button type="button" class="layui-btn" id="rotateLeft"><i class="layui-icon layui-icon-left"></i> 向左旋转</button>
|
|
<button type="button" class="layui-btn" id="rotateRight"><i class="layui-icon layui-icon-right"></i> 向右旋转</button>
|
|
<button type="button" class="layui-btn" id="resetImg"><i class="layui-icon layui-icon-refresh"></i> 重置</button>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<button type="button" class="layui-btn layui-btn-fluid" id="confirmSave">保存修改</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
layui.config({ base: '/assets/ywxapp/modules/' }).extend({ cropper: 'cropper/cropper' });
|
|
|
|
layui.use(['jquery', 'layer', 'cropper', 'http'], function () {
|
|
var $ = layui.$;
|
|
var layer = layui.layer;
|
|
var http = layui.http;
|
|
var $image = $('#cropImage');
|
|
var options = { aspectRatio: 1 / 1, preview: '.img-preview', viewMode: 1 };
|
|
var cropped = false;
|
|
|
|
// 选择图片
|
|
$('#pickBtn').on('click', function () { $('#avatarImgUpload').click(); });
|
|
$('#avatarImgUpload').on('change', function () {
|
|
var file = this.files[0];
|
|
if (!file) return;
|
|
var reader = new FileReader();
|
|
reader.onload = function (e) {
|
|
$image.attr('src', e.target.result);
|
|
$image.off('load.crop').on('load.crop', function () {
|
|
if (cropped) { $image.cropper('destroy'); }
|
|
$image.cropper(options);
|
|
cropped = true;
|
|
});
|
|
};
|
|
reader.readAsDataURL(file);
|
|
this.value = '';
|
|
});
|
|
|
|
// 旋转 / 重置
|
|
$('#rotateLeft').on('click', function () { if (cropped) $image.cropper('rotate', -15); });
|
|
$('#rotateRight').on('click', function () { if (cropped) $image.cropper('rotate', 15); });
|
|
$('#resetImg').on('click', function () { if (cropped) $image.cropper('reset'); });
|
|
|
|
// 保存：裁剪后上传
|
|
$('#confirmSave').on('click', function () {
|
|
if (!cropped) { layer.msg('请先选择图片', { icon: 2 }); return; }
|
|
var canvas = $image.cropper('getCroppedCanvas', { width: 300, height: 300 });
|
|
if (!canvas) { layer.msg('裁剪失败，请重试', { icon: 2 }); return; }
|
|
layer.load(1, { shade: [0.3, '#fff'] });
|
|
canvas.toBlob(function (blob) {
|
|
var fd = new FormData();
|
|
fd.append('file', blob, 'avatar.png');
|
|
fd.append('type', 'avatar');
|
|
http.post("{:url('user/profile/avatar')}", fd).then(function (res) {
|
|
layer.closeAll('loading');
|
|
if (res.code === 0 && res.data && res.data.src) {
|
|
layer.msg(res.msg || '头像上传成功', { icon: 1 });
|
|
refreshParentAvatar(res.data.src);
|
|
} else {
|
|
layer.msg(res.msg || '上传失败', { icon: 2 });
|
|
}
|
|
}).catch(function () {
|
|
layer.closeAll('loading');
|
|
layer.msg('网络错误，上传失败', { icon: 2 });
|
|
});
|
|
}, 'image/png');
|
|
});
|
|
|
|
// 刷新会员中心顶部头像与个人资料页预览
|
|
function refreshParentAvatar(src) {
|
|
try {
|
|
if (window !== top && parent.layui && parent.layui.ywxapp) {
|
|
var ts = '?t=' + Date.now();
|
|
parent.document.querySelectorAll('img.layui-nav-img').forEach(function (im) {
|
|
im.src = src + ts;
|
|
});
|
|
var prev = parent.document.getElementById('avatarPreview');
|
|
if (prev) { prev.src = src + ts; }
|
|
setTimeout(function () { parent.layui.ywxapp.closeThisTabs(); }, 700);
|
|
return;
|
|
}
|
|
} catch (e) { /* 跨域等情况忽略 */ }
|
|
setTimeout(function () { location.href = '/user/profile'; }, 700);
|
|
}
|
|
});
|
|
</script>
|