Backupppert/immich
1
1
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-07-23 22:44:38 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(web): create face from video ()

Browse source 
* fix: create face from video

* fix: remove comment

* fix: inaccurate bounding boxes
This commit is contained in:
martin 2023-12-08 05:18:33 +01:00 • committed by GitHub
commit bc65bbfcc4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 30 additions and 9 deletions
web/src/lib/components/faces-page
assign-face-side-panel.svelte

31
web/src/lib/components/faces-page/assign-face-side-panel.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts">
import { api, type AssetFaceResponseDto, type PersonResponseDto } from '@api';
import { api, AssetTypeEnum, type AssetFaceResponseDto, type PersonResponseDto, ThumbnailFormat } from '@api';
import { createEventDispatcher } from 'svelte';
import { linear } from 'svelte/easing';
import { fly } from 'svelte/transition';
@ -14,6 +14,8 @@
export let peopleWithFaces: AssetFaceResponseDto[];
export let allPeople: PersonResponseDto[];
export let editedPersonIndex: number;
export let assetType: AssetTypeEnum;
export let assetId: string;
// loading spinners
let isShowLoadingNewPerson = false;
@ -31,23 +33,38 @@
dispatch('close');
};
const zoomImageToBase64 = async (face: AssetFaceResponseDto): Promise<string | null> => {
if ($photoViewer === null) {
let image: HTMLImageElement | null = null;
if (assetType === AssetTypeEnum.Image) {
image = $photoViewer;
} else if (assetType === AssetTypeEnum.Video) {
const data = await api.getAssetThumbnailUrl(assetId, ThumbnailFormat.Webp);
const img: HTMLImageElement = new Image();
img.src = data;
await new Promise<void>((resolve) => {
img.onload = () => resolve();
img.onerror = () => resolve();
});
image = img;
}
if (image === null) {
return null;
}
const { boundingBoxX1: x1, boundingBoxX2: x2, boundingBoxY1: y1, boundingBoxY2: y2 } = face;
const coordinates = {
x1: ($photoViewer.naturalWidth / face.imageWidth) * x1,
x2: ($photoViewer.naturalWidth / face.imageWidth) * x2,
y1: ($photoViewer.naturalHeight / face.imageHeight) * y1,
y2: ($photoViewer.naturalHeight / face.imageHeight) * y2,
x1: (image.naturalWidth / face.imageWidth) * x1,
x2: (image.naturalWidth / face.imageWidth) * x2,
y1: (image.naturalHeight / face.imageHeight) * y1,
y2: (image.naturalHeight / face.imageHeight) * y2,
};
const faceWidth = coordinates.x2 - coordinates.x1;
const faceHeight = coordinates.y2 - coordinates.y1;
const faceImage = new Image();
faceImage.src = $photoViewer.src;
faceImage.src = image.src;
await new Promise((resolve) => {
faceImage.onload = resolve;