helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

chore: migrate profile picture cropper modal (#19378)

Browse source
This commit is contained in:
Daniel Dietzler 2025-06-20 20:16:10 +02:00 • committed by GitHub
parent a5d84ba552
commit 373b654156
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 5 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

104
web/src/lib/components/shared-components/profile-image-cropper.svelte
View file

@ -1,104 +0,0 @@
<script lang="ts">
import { user } from '$lib/stores/user.store';
import { handleError } from '$lib/utils/handle-error';
import { createProfileImage, type AssetResponseDto } from '@immich/sdk';
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
import domtoimage from 'dom-to-image';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import PhotoViewer from '../asset-viewer/photo-viewer.svelte';
import { NotificationType, notificationController } from './notification/notification';
interface Props {
asset: AssetResponseDto;
onClose: () => void;
}
let { asset, onClose }: Props = $props();
let imgElement: HTMLDivElement | undefined = $state();
onMount(() => {
if (!imgElement) {
return;
}
imgElement.style.width = '100%';
});
const hasTransparentPixels = async (blob: Blob) => {
const img = new Image();
img.src = URL.createObjectURL(blob);
await img.decode();
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const context = canvas.getContext('2d');
if (!context) {
throw new Error('Could not get canvas context.');
}
context.drawImage(img, 0, 0);
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData?.data;
if (!data) {
throw new Error('Could not get image data.');
}
for (let index = 0; index < data.length; index += 4) {
if (data[index + 3] < 255) {
return true;
}
}
return false;
};
const handleSetProfilePicture = async () => {
if (!imgElement) {
return;
}
try {
const imgElementHeight = imgElement.offsetHeight;
const imgElementWidth = imgElement.offsetWidth;
const blob = await domtoimage.toBlob(imgElement, {
width: imgElementWidth,
height: imgElementHeight,
});
if (await hasTransparentPixels(blob)) {
notificationController.show({
type: NotificationType.Error,
message: $t('errors.profile_picture_transparent_pixels'),
timeout: 3000,
});
return;
}
const file = new File([blob], 'profile-picture.png', { type: 'image/png' });
const { profileImagePath, profileChangedAt } = await createProfileImage({ createProfileImageDto: { file } });
notificationController.show({
type: NotificationType.Info,
message: $t('profile_picture_set'),
timeout: 3000,
});
$user.profileImagePath = profileImagePath;
$user.profileChangedAt = profileChangedAt;
} catch (error) {
handleError(error, $t('errors.unable_to_set_profile_picture'));
}
onClose();
};
</script>
<Modal size="small" title={$t('set_profile_picture')} {onClose}>
<ModalBody>
<div class="flex place-items-center items-center justify-center">
<div
class="relative flex aspect-square w-[250px] overflow-hidden rounded-full border-4 border-immich-primary bg-immich-dark-primary dark:border-immich-dark-primary dark:bg-immich-primary"
>
<PhotoViewer bind:element={imgElement} {asset} />
</div>
</div>
</ModalBody>
<ModalFooter>
<Button fullWidth shape="round" onclick={handleSetProfilePicture}>{$t('set_as_profile_picture')}</Button>
</ModalFooter>
</Modal>