2fb5d4ae0a
- Added height, width, and quality fields to AnkiConnect settings. - Updated imageToWebp and getCroppedImg functions to accept settings for resizing and quality. - Integrated settings into Cropper and QuickActions components for improved image handling. Reason Note: The recommended settings of 200 and 0.5 make average file sizes of around 5kb. This is about the same filesize as the audio for a given word. With maximum quality and no file size limit, an image size of 1200x1800 pixels is around 1mb. This means 1,000 words mined with full sized pictures takes up a 1gb of space on anki. With the recommended settings, it would take 200,000 words mined to take up a GB of space on anki. These quality settings can be disabled by settings the max quality to 1 and max width and height to 0. The user is in full control of these changes.
75 lines
1.8 KiB
Svelte
75 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import { afterNavigate, beforeNavigate } from '$app/navigation';
|
|
import { cropperStore, getCroppedImg, updateLastCard, type Pixels } from '$lib/anki-connect';
|
|
import { settings } from '$lib/settings';
|
|
import { Button, Modal, Spinner } from 'flowbite-svelte';
|
|
import { onMount } from 'svelte';
|
|
import Cropper from 'svelte-easy-crop';
|
|
|
|
let open = false;
|
|
let pixels: Pixels;
|
|
let loading = false;
|
|
|
|
afterNavigate(() => {
|
|
close();
|
|
});
|
|
|
|
beforeNavigate((nav) => {
|
|
if (open) {
|
|
nav.cancel();
|
|
close();
|
|
}
|
|
});
|
|
|
|
onMount(() => {
|
|
cropperStore.subscribe((value) => {
|
|
if (value) {
|
|
open = value.open;
|
|
}
|
|
});
|
|
});
|
|
|
|
function close() {
|
|
loading = false;
|
|
cropperStore.set({ open: false });
|
|
}
|
|
|
|
async function onCrop() {
|
|
if ($cropperStore?.image && pixels) {
|
|
loading = true;
|
|
const imageData = await getCroppedImg($cropperStore.image, pixels, $settings);
|
|
updateLastCard(imageData, $cropperStore.sentence);
|
|
close();
|
|
}
|
|
}
|
|
|
|
function onCropComplete(e: any) {
|
|
pixels = e.detail.pixels;
|
|
}
|
|
</script>
|
|
|
|
<Modal title="Crop image" bind:open on:{close}>
|
|
{#if $cropperStore?.image && !loading}
|
|
<div class=" flex flex-col gap-2">
|
|
<div class="relative w-full h-[55svh] sm:h-[65svh]">
|
|
<Cropper
|
|
zoomSpeed={0.5}
|
|
maxZoom={10}
|
|
image={$cropperStore?.image}
|
|
on:cropcomplete={onCropComplete}
|
|
/>
|
|
</div>
|
|
{#if $settings.ankiConnectSettings.grabSentence && $cropperStore?.sentence}
|
|
<p>
|
|
<b>Sentence:</b>
|
|
{$cropperStore?.sentence}
|
|
</p>
|
|
{/if}
|
|
<Button on:click={onCrop}>Crop</Button>
|
|
<Button on:click={close} outline color="light">Close</Button>
|
|
</div>
|
|
{:else}
|
|
<div class="text-center"><Spinner /></div>
|
|
{/if}
|
|
</Modal>
|