feat: add avatar cropping with Cropper.js and server-side resize
This commit is contained in:
@@ -6,6 +6,8 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{.Title}} - {{index .Tr "site_title"}}</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js"></script>
|
||||
</head>
|
||||
<body class="bg-gray-50 min-h-screen flex flex-col">
|
||||
<!-- Navigation -->
|
||||
|
||||
@@ -15,24 +15,47 @@
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<!-- Avatar Crop Modal -->
|
||||
<div id="avatarCropModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50">
|
||||
<div class="bg-white rounded-xl shadow-xl max-w-lg w-full mx-4 p-6">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-4">{{index .Tr "crop_avatar_title"}}</h3>
|
||||
<div class="max-h-64 overflow-hidden mb-4 flex items-center justify-center bg-gray-100">
|
||||
<img id="avatarCropImage" src="" alt="crop preview" class="max-w-full block">
|
||||
</div>
|
||||
<div class="flex gap-3 justify-end">
|
||||
<button type="button" id="cropCancelBtn"
|
||||
class="px-4 py-2 rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-100 transition-colors cursor-pointer">
|
||||
{{index .Tr "crop_cancel"}}
|
||||
</button>
|
||||
<button type="button" id="cropConfirmBtn"
|
||||
class="px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors cursor-pointer">
|
||||
{{index .Tr "crop_confirm"}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form action="/profile" method="post" enctype="multipart/form-data" class="space-y-8">
|
||||
<!-- Avatar Section -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-4">{{index .Tr "profile_avatar"}}</h3>
|
||||
<div class="flex items-center gap-5">
|
||||
<div class="w-20 h-20 rounded-full overflow-hidden border-2 border-gray-300 flex items-center justify-center bg-gray-200">
|
||||
<div id="avatarPreviewContainer" class="w-20 h-20 rounded-full overflow-hidden border-2 border-gray-300 flex items-center justify-center bg-gray-200">
|
||||
{{if .Profile.Avatar}}
|
||||
<img src="/uploads/avatars/{{.Profile.Avatar}}" alt="avatar" class="w-full h-full object-cover">
|
||||
<img id="avatarPreviewImg" src="/uploads/avatars/{{.Profile.Avatar}}" alt="avatar" class="w-full h-full object-cover">
|
||||
{{else}}
|
||||
<svg class="w-10 h-10 text-gray-500" fill="currentColor" viewBox="0 0 24 24">
|
||||
<svg id="avatarPreviewSvg" class="w-10 h-10 text-gray-500" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v1.2c0 .66.54 1.2 1.2 1.2h16.8c.66 0 1.2-.54 1.2-1.2v-1.2c0-3.2-6.4-4.8-9.6-4.8z"/>
|
||||
</svg>
|
||||
{{end}}
|
||||
</div>
|
||||
<label class="cursor-pointer bg-gray-200 text-gray-700 px-4 py-2 rounded-lg font-medium hover:bg-gray-300 transition-colors text-sm">
|
||||
{{index .Tr "profile_change_avatar"}}
|
||||
<input type="file" name="avatar" accept="image/*" class="hidden" onchange="this.form.submit()">
|
||||
</label>
|
||||
<div>
|
||||
<label class="cursor-pointer bg-gray-200 text-gray-700 px-4 py-2 rounded-lg font-medium hover:bg-gray-300 transition-colors text-sm">
|
||||
{{index .Tr "profile_change_avatar"}}
|
||||
<input type="file" id="avatarFileInput" name="avatar" accept="image/*" class="hidden">
|
||||
</label>
|
||||
<div id="avatarUploadStatus" class="mt-2 text-sm text-gray-500 hidden"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -96,4 +119,127 @@
|
||||
</section>
|
||||
|
||||
{{template "footer" .}}
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
var cropper = null;
|
||||
var fileInput = document.getElementById('avatarFileInput');
|
||||
var modal = document.getElementById('avatarCropModal');
|
||||
var cropImage = document.getElementById('avatarCropImage');
|
||||
var cancelBtn = document.getElementById('cropCancelBtn');
|
||||
var confirmBtn = document.getElementById('cropConfirmBtn');
|
||||
var statusDiv = document.getElementById('avatarUploadStatus');
|
||||
var previewContainer = document.getElementById('avatarPreviewContainer');
|
||||
|
||||
// i18n strings from template
|
||||
var i18nCropError = "{{index .Tr "crop_error"}}";
|
||||
var i18nCropUploading = "{{index .Tr "crop_uploading"}}";
|
||||
var i18nCropSuccess = "{{index .Tr "crop_success"}}";
|
||||
var i18nCropConfirm = "{{index .Tr "crop_confirm"}}";
|
||||
|
||||
fileInput.addEventListener('change', function() {
|
||||
var file = this.files[0];
|
||||
if (!file) return;
|
||||
|
||||
if (!file.type.match(/^image\/(jpeg|png|gif|webp)$/)) {
|
||||
showStatus(i18nCropError, 'red');
|
||||
this.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
cropImage.src = e.target.result;
|
||||
modal.classList.remove('hidden');
|
||||
modal.classList.add('flex');
|
||||
|
||||
if (cropper) cropper.destroy();
|
||||
cropper = new Cropper(cropImage, {
|
||||
aspectRatio: 1,
|
||||
viewMode: 1,
|
||||
autoCropArea: 0.85,
|
||||
responsive: true
|
||||
});
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
|
||||
cancelBtn.addEventListener('click', function() {
|
||||
if (cropper) { cropper.destroy(); cropper = null; }
|
||||
modal.classList.add('hidden');
|
||||
modal.classList.remove('flex');
|
||||
fileInput.value = '';
|
||||
});
|
||||
|
||||
confirmBtn.addEventListener('click', function() {
|
||||
if (!cropper) return;
|
||||
|
||||
confirmBtn.disabled = true;
|
||||
confirmBtn.textContent = i18nCropUploading;
|
||||
showStatus(i18nCropUploading, 'gray');
|
||||
|
||||
var canvas = cropper.getCroppedCanvas({
|
||||
width: 256,
|
||||
height: 256,
|
||||
maxWidth: 512,
|
||||
maxHeight: 512,
|
||||
imageSmoothingEnabled: true,
|
||||
imageSmoothingQuality: 'high'
|
||||
});
|
||||
|
||||
canvas.toBlob(function(blob) {
|
||||
var formData = new FormData();
|
||||
formData.append('avatar', blob, 'avatar.jpg');
|
||||
|
||||
fetch('/profile/avatar', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
credentials: 'same-origin'
|
||||
})
|
||||
.then(function(res) { return res.json(); })
|
||||
.then(function(data) {
|
||||
if (data.avatar) {
|
||||
var ts = Date.now();
|
||||
var avatarUrl = '/uploads/avatars/' + data.avatar + '?t=' + ts;
|
||||
|
||||
// Update profile page preview
|
||||
previewContainer.innerHTML =
|
||||
'<img src="' + avatarUrl + '" alt="avatar" class="w-full h-full object-cover">';
|
||||
|
||||
// Update nav bar avatar
|
||||
var navAvatarBtn = document.getElementById('avatarBtn');
|
||||
if (navAvatarBtn) {
|
||||
navAvatarBtn.innerHTML =
|
||||
'<img src="' + avatarUrl + '" alt="avatar" class="w-full h-full object-cover">';
|
||||
}
|
||||
|
||||
showStatus(i18nCropSuccess, 'green');
|
||||
} else {
|
||||
showStatus(data.error || i18nCropError, 'red');
|
||||
}
|
||||
})
|
||||
.catch(function() {
|
||||
showStatus(i18nCropError, 'red');
|
||||
})
|
||||
.finally(function() {
|
||||
if (cropper) { cropper.destroy(); cropper = null; }
|
||||
modal.classList.add('hidden');
|
||||
modal.classList.remove('flex');
|
||||
fileInput.value = '';
|
||||
confirmBtn.disabled = false;
|
||||
confirmBtn.textContent = i18nCropConfirm;
|
||||
});
|
||||
}, 'image/jpeg', 0.92);
|
||||
});
|
||||
|
||||
function showStatus(msg, color) {
|
||||
statusDiv.textContent = msg;
|
||||
statusDiv.classList.remove('hidden', 'text-gray-500', 'text-green-600', 'text-red-600');
|
||||
if (color === 'green') statusDiv.classList.add('text-green-600');
|
||||
else if (color === 'red') statusDiv.classList.add('text-red-600');
|
||||
else statusDiv.classList.add('text-gray-500');
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
{{end}}
|
||||
|
||||
Reference in New Issue
Block a user