#13 use webp instead of jpeg/png

This commit is contained in:
Your Name 2025-01-30 20:38:22 +01:00
parent 5707d1bb1f
commit 2885ece241
4 changed files with 14 additions and 14 deletions

View File

@ -4,7 +4,7 @@
"secure": false, "secure": false,
"changeOrigin": true "changeOrigin": true
}, },
"/debug_images": { "/images": {
"target": "http://localhost:8080", "target": "http://localhost:8080",
"secure": false, "secure": false,
"changeOrigin": true "changeOrigin": true

View File

@ -67,7 +67,7 @@
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<div class="relative group"> <div class="relative group">
<div class="absolute left-0 bottom-full mb-2 w-48 bg-white border border-gray-300 rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10 pointer-events-none"> <div class="absolute left-0 bottom-full mb-2 w-48 bg-white border border-gray-300 rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10 pointer-events-none">
<img src="/debug_images/{{ image.bildid }}/thumbnail.jpg" alt="{{ image.name }}" class="w-full h-auto object-cover" /> <img src="/images/{{ image.bildid }}/thumbnail.webp" alt="{{ image.name }}" class="w-full h-auto object-cover" />
</div> </div>
<span class="font-medium cursor-pointer">{{ image.name }}</span> <span class="font-medium cursor-pointer">{{ image.name }}</span>
</div> </div>

View File

@ -167,7 +167,7 @@ export class DeckListComponent implements OnInit {
// Method to edit an image in a deck // Method to edit an image in a deck
editImage(deck: Deck, image: DeckImage): void { editImage(deck: Deck, image: DeckImage): void {
let imageSrc = null; let imageSrc = null;
fetch(`/debug_images/${image.bildid}/original_compressed.jpg`) fetch(`/images/${image.bildid}/original.webp`)
.then(response => { .then(response => {
if (!response.ok) { if (!response.ok) {
throw new Error('Network response was not ok'); throw new Error('Network response was not ok');

View File

@ -125,7 +125,7 @@ export class TrainingComponent implements OnInit {
if (!ctx || !this.currentImageData) return; if (!ctx || !this.currentImageData) return;
const img = new Image(); const img = new Image();
img.src = `/debug_images/${this.currentImageData.bildid}/original_compressed.jpg`; img.src = `/images/${this.currentImageData.bildid}/original.webp`;
img.onload = () => { img.onload = () => {
// Set the canvas size to the image size // Set the canvas size to the image size
canvas.width = img.width; canvas.width = img.width;