gorb/frontend
4
0
Fork 0
Code Issues 6 Pull requests 1 Projects Releases Packages 1 Wiki Activity Actions

pfp cropping #12

Merged
justtemmie merged 11 commits from pfp-cropping into main 2025-07-05 17:34:28 +00:00
Conversation 3 Commits 11 Files changed 7 +208 -1
4 changed files with 208 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 3c4965c06f - Show all commits

61
components/CropPopup.vue Normal file
View file

@ -0,0 +1,61 @@
<template>
<div class="crop-popup">
<div class="crop-container">
<img ref="image" :src="imageSrc" alt="Picture">
</div>
<div class="image-preview"></div>
<Button text="Crop" :callback="cropImage"></Button>
<Button text="Cancel" :callback="closePopup"></Button>
</div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import Cropper from 'cropperjs';
const props = defineProps({
imageSrc: String,
onCrop: Function,
onClose: Function,
});
const image = ref<HTMLImageElement | null>(null);
const cropper = ref<Cropper | null>(null);
watch(image, (newValue) => {
if (newValue) {
cropper.value = new Cropper(newValue)
const selection = cropper.value.getCropperSelection()
if (selection) {
selection.precise = true
selection.aspectRatio = 1
selection.initialCoverage = 1
}
}
});
async function cropImage() {
if (cropper) {
cropper.value?.element
const selection = cropper.value?.getCropperSelection();
if (selection) {
const canvas = await selection.$toCanvas({width: 256, height: 256})
console.log(canvas)
canvas.toBlob((blob) => {
if (blob && props.onCrop) {
props.onCrop(blob);
}
});
}
}
}
function closePopup() {
if (props.onClose) {
props.onClose();
}
}
</script>
<style scoped>
</style>

37
components/Settings/UserSettings/Profile.vue
View file

@ -21,12 +21,23 @@
</div>
<UserPopup v-if="user" :user="user" id="profile-popup"></UserPopup>
<CropPopup
v-if="isCropPopupVisible"
:imageSrc="cropImageSrc"
:onCrop="handleCrop"
:onClose="closeCropPopup"
/>
</div>
</div>
<div id="crop-container">
</div>
</template>
<script lang="ts" setup>
import Button from '~/components/Button.vue';
import CropPopup from '~/components/CropPopup.vue';
import type { UserResponse } from '~/types/interfaces';
const { fetchUser } = useAuth();
@ -38,6 +49,8 @@ if (!user) {
}
let newPfpFile: File;
const isCropPopupVisible = ref(false); // State to manage the visibility of the CropPopup
const cropImageSrc = ref(''); // State to hold the image source for cropping
async function saveChanges() {
if (!user) return;
@ -93,7 +106,8 @@ async function changeAvatar() {
const reader = new FileReader();
reader.addEventListener("load", () => {
if (reader.result && typeof reader.result === 'string') {
user.avatar = reader.result;
cropImageSrc.value = reader.result;
isCropPopupVisible.value = true;
}
});
reader.readAsDataURL(file);
@ -102,6 +116,27 @@ async function changeAvatar() {
input.click()
}
function handleCrop(blob: Blob) {
if (!user) return;
newPfpFile = new File([blob], 'avatar.png', { type: 'image/png' })
const reader = new FileReader();
reader.addEventListener("load", () => {
if (reader.result && typeof reader.result === 'string') {
user.avatar = reader.result;
}
});
reader.readAsDataURL(newPfpFile)
closeCropPopup()
}
function closeCropPopup() {
isCropPopupVisible.value = false
}
</script>
<style scoped>

1
package.json
View file

@ -14,6 +14,7 @@
"@nuxt/icon": "1.13.0",
"@nuxt/image": "1.10.0",
"@pinia/nuxt": "0.11.0",
"cropperjs": "^2.0.0",
"dompurify": "^3.2.6",
"marked": "^15.0.12",
"nuxt": "^3.17.0",

110
pnpm-lock.yaml generated
View file

@ -20,6 +20,9 @@ importers:
'@pinia/nuxt':
specifier: 0.11.0
version: 0.11.0(magicast@0.3.5)(pinia@3.0.2(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3)))
cropperjs:
specifier: ^2.0.0
version: 2.0.0
dompurify:
specifier: ^3.2.6
version: 3.2.6
@ -205,6 +208,39 @@ packages:
resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==}
engines: {node: '>=0.1.90'}
'@cropper/element-canvas@2.0.0':
resolution: {integrity: sha512-GPtGJgSm92crJhhhwUsaMw3rz2KfJWWSz7kRAlufFEV/EHTP5+6r6/Z1BCGRna830i+Avqbm435XLOtA7PVJwA==}
'@cropper/element-crosshair@2.0.0':
resolution: {integrity: sha512-KfPfyrdeFvUC31Ws7ATtcalWWSaMtrC6bMoCipZhqbUOE7wZoL4ecDSL6BUOZxPa74awZUqfzirCDjHvheBfyw==}
'@cropper/element-grid@2.0.0':
resolution: {integrity: sha512-i78SQ0IJTLFveKX6P7svkfMYVdgHrQ8ZmmEw8keFy9n1ZVbK+SK0UHK5FNMRNI/gtVhKJOGEnK/zeyjUdj4Iyw==}
'@cropper/element-handle@2.0.0':
resolution: {integrity: sha512-ZJvW+0MkK9E8xYymGdoruaQn2kwjSHFpNSWinjyq6csuVQiCPxlX5ovAEDldmZ9MWePPtWEi3vLKQOo2Yb0T8g==}
'@cropper/element-image@2.0.0':
resolution: {integrity: sha512-9BxiTS/aHRmrjopaFQb9mQQXmx4ruhYHGkDZMVz24AXpMFjUY6OpqrWse/WjzD9tfhMFvEdu17b3VAekcAgpeg==}
'@cropper/element-selection@2.0.0':
resolution: {integrity: sha512-ensNnbIfJsJ8bhbJTH/RXtk2URFvTOO4TvfRk461n2FPEC588D7rwBmUJxQg74IiTi4y1JbCI+6j+4LyzYBLCQ==}
'@cropper/element-shade@2.0.0':
resolution: {integrity: sha512-jv/2bbNZnhU4W+T4G0c8ADocLIZvQFTXgCf2RFDNhI5UVxurzWBnDdb8Mx8LnVplnkTqO+xUmHZYve0CwgWo+Q==}
'@cropper/element-viewer@2.0.0':
resolution: {integrity: sha512-zY+3VRN5TvpM8twlphYtXw0tzJL2VgzeK7ufhL1BixVqOdRxwP13TprYIhqwGt9EW/SyJZUiaIu396T89kRX8A==}
'@cropper/element@2.0.0':
resolution: {integrity: sha512-lsthn0nQq73GExUE7Mg/ss6Q3RXADGDv055hxoLFwvl/wGHgy6ZkYlfLZ/VmgBHC6jDK5IgPBFnqrPqlXWSGBA==}
'@cropper/elements@2.0.0':
resolution: {integrity: sha512-PQkPo1nUjxLFUQuHYu+6atfHxpX9B41Xribao6wpvmvmNIFML6LQdNqqWYb6LyM7ujsu71CZdBiMT5oetjJVoQ==}
'@cropper/utils@2.0.0':
resolution: {integrity: sha512-cprLYr+7kK3faGgoOsTW9gIn5sefDr2KwOmgyjzIXk+8PLpW8FgFKEg5FoWfRD5zMAmkCBuX6rGKDK3VdUEGrg==}
'@dabh/diagnostics@2.0.3':
resolution: {integrity: sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==}
@ -1900,6 +1936,9 @@ packages:
resolution: {integrity: sha512-onMB0OkDjkXunhdW9htFjEhqrD54+M94i6ackoUkjHKbRnXdyEyKRelp4nJ1kAz32+s27jP1FsebpJCVl0BsvA==}
engines: {node: '>=18.0'}
cropperjs@2.0.0:
resolution: {integrity: sha512-TO2j0Qre01kPHbow4FuTrbdEB4jTmGRySxW49jyEIqlJZuEBfrvCTT0vC3eRB2WBXudDfKi1Onako6DKWKxeAQ==}
cross-spawn@7.0.6:
resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
engines: {node: '>= 8'}
@ -4965,6 +5004,72 @@ snapshots:
'@colors/colors@1.6.0': {}
'@cropper/element-canvas@2.0.0':
dependencies:
'@cropper/element': 2.0.0
'@cropper/utils': 2.0.0
'@cropper/element-crosshair@2.0.0':
dependencies:
'@cropper/element': 2.0.0
'@cropper/utils': 2.0.0
'@cropper/element-grid@2.0.0':
dependencies:
'@cropper/element': 2.0.0
'@cropper/utils': 2.0.0
'@cropper/element-handle@2.0.0':
dependencies:
'@cropper/element': 2.0.0
'@cropper/utils': 2.0.0
'@cropper/element-image@2.0.0':
dependencies:
'@cropper/element': 2.0.0
'@cropper/element-canvas': 2.0.0
'@cropper/utils': 2.0.0
'@cropper/element-selection@2.0.0':
dependencies:
'@cropper/element': 2.0.0
'@cropper/element-canvas': 2.0.0
'@cropper/element-image': 2.0.0
'@cropper/utils': 2.0.0
'@cropper/element-shade@2.0.0':
dependencies:
'@cropper/element': 2.0.0
'@cropper/element-canvas': 2.0.0
'@cropper/element-selection': 2.0.0
'@cropper/utils': 2.0.0
'@cropper/element-viewer@2.0.0':
dependencies:
'@cropper/element': 2.0.0
'@cropper/element-canvas': 2.0.0
'@cropper/element-image': 2.0.0
'@cropper/element-selection': 2.0.0
'@cropper/utils': 2.0.0
'@cropper/element@2.0.0':
dependencies:
'@cropper/utils': 2.0.0
'@cropper/elements@2.0.0':
dependencies:
'@cropper/element': 2.0.0
'@cropper/element-canvas': 2.0.0
'@cropper/element-crosshair': 2.0.0
'@cropper/element-grid': 2.0.0
'@cropper/element-handle': 2.0.0
'@cropper/element-image': 2.0.0
'@cropper/element-selection': 2.0.0
'@cropper/element-shade': 2.0.0
'@cropper/element-viewer': 2.0.0
'@cropper/utils@2.0.0': {}
'@dabh/diagnostics@2.0.3':
dependencies:
colorspace: 1.1.4
@ -6895,6 +7000,11 @@ snapshots:
croner@9.0.0: {}
cropperjs@2.0.0:
dependencies:
'@cropper/elements': 2.0.0
'@cropper/utils': 2.0.0
cross-spawn@7.0.6:
dependencies:
path-key: 3.1.1