administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-19 01:17:06 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Convert to base64

Browse Source
This commit is contained in:
Weitheng Haw 2025-01-28 11:41:47 +00:00
parent ffd2adcf6c
commit 400ee3401f
1 changed files with 26 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
web/src/pages/FaceLibrary.tsx
View File

@ -133,22 +133,24 @@ export default function FaceLibrary() {
setIsCreatingFace(true); setIsCreatingFace(true);
try { try {
// Create a 1x1 transparent WebP image
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
canvas.width = 1; canvas.width = 1;
canvas.height = 1; canvas.height = 1;
const blob = await new Promise<Blob>((resolve) => const ctx = canvas.getContext('2d');
canvas.toBlob((b) => resolve(b!), 'image/webp') if (ctx) {
); ctx.fillStyle = 'white';
ctx.fillRect(0, 0, 1, 1);
}
const base64Image = canvas.toDataURL('image/webp').split(',')[1];
const formData = new FormData(); const formData = new FormData();
formData.append('file', blob, 'placeholder.webp');
formData.append('cropped', 'true'); formData.append('cropped', 'true');
formData.append('image', base64Image);
const resp = await axios.post(`/faces/${newFaceName}`, formData, { const resp = await axios.post(`/faces/${newFaceName}`, {
headers: { cropped: true,
'Content-Type': 'multipart/form-data', image: base64Image
},
}); });
if (resp.status === 200) { if (resp.status === 200) {
@ -180,19 +182,26 @@ export default function FaceLibrary() {
setIsRenaming(true); setIsRenaming(true);
try { try {
// Create a 1x1 transparent WebP image for the new face directory // Create a 1x1 transparent WebP image
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
canvas.width = 1; canvas.width = 1;
canvas.height = 1; canvas.height = 1;
const blob = await new Promise<Blob>((resolve) => const ctx = canvas.getContext('2d');
canvas.toBlob((b) => resolve(b!), 'image/webp') if (ctx) {
); ctx.fillStyle = 'white';
ctx.fillRect(0, 0, 1, 1);
}
const formData = new FormData(); // Convert to base64
formData.append('file', blob, 'placeholder.webp'); const base64Image = canvas.toDataURL('image/webp').split(',')[1];
formData.append('cropped', 'true');
await axios.post(`/faces/${renameData.newName}`, formData);
// Create new face directory
await axios.post(`/faces/${renameData.newName}`, {
cropped: true,
image: base64Image
});
// Copy existing images
const oldFaceImages = faceData[renameData.oldName] || []; const oldFaceImages = faceData[renameData.oldName] || [];
for (const image of oldFaceImages) { for (const image of oldFaceImages) {
const response = await fetch(`${baseUrl}clips/faces/${renameData.oldName}/${image}`); const response = await fetch(`${baseUrl}clips/faces/${renameData.oldName}/${image}`);