feat: start implementing image cropping when uploading pfp
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:
JustTemmie 2025-07-04 08:04:50 +02:00
parent 873f1c81a9
commit 3c4965c06f
Signed by: justtemmie
SSH key fingerprint: SHA256:nBO+OwpTkd8LYhe38PIqdxmDvkIg9Vw2EbrRZM97dkU
4 changed files with 208 additions and 1 deletions

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