feat: start implementing image cropping when uploading pfp
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
still need to fix the selection to within the canvas boundries, and fix theming
This commit is contained in:
parent
873f1c81a9
commit
3c4965c06f
SSH key fingerprint:
SHA256:nBO+OwpTkd8LYhe38PIqdxmDvkIg9Vw2EbrRZM97dkU
4 changed files with 208 additions and 1 deletions
61
components/CropPopup.vue
Normal file
61
components/CropPopup.vue
Normal 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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
110
pnpm-lock.yaml
generated
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue